Error on 2nd to last line of CSV data on page load

Rossm812

URL:
http://www.warrencountyia.org/testing/directory.shtml

My page has a directory that references a CSV file- when it is edited in Excel or any other csv editor either for content or to add/remove columns etc. it breaks the page and I get an error on the second to last line (195 of 196)... If I delete lines 195 and 196, then the error just moves on up to 193.

Error:
DataTables warning: table id=directory - Requested unknown parameter '2' for row 195. For more info.... http://datatables.net/tn/4

Debug Data
http://debug.datatables.net/okuleb

I have looked through the referenced page but just have found nothing. I either am missing something silly or there is something deeper that I have just not seen.

kthorngren

Looks like the last line is blank. Try removing it. I think DT is trying to parse that line and erroring because there is no data.

Kevin

Rossm812

function init_table(options) {

  options = options || {};
  var csv_path = options.csv_path || "../data/PhoneDirectory2.csv";
  var el = options.element || "table-directory";
  var allow_download = options.allow_download || true;
  var csv_options = options.csv_options || {};
  var datatables_options = options.datatables_options || {};

  $("#" + el).html("<table class='table table-striped table-condensed' id='directory'></table>");

  $.when($.get(csv_path)).then(
    function(data){

      data = data.replace(/[\r|\r\n]/g, "\n\r");
      
      var csv_data = $.csv.toArrays(data, csv_options);

      var table_head = "<thead><tr>";

      for (head_id = 0; head_id < csv_data[0].length; head_id++) { 
        table_head += "<th>" + csv_data[0][head_id] + "</th>";
      }

      table_head += "</tr></thead>";
      $('#directory').append(table_head);
      $('#directory').append("<tbody></tbody>");

      for (row_id = 1; row_id < csv_data.length; row_id++) { 
        var row_html = "<tr>";

          for (col_id = 0; col_id < csv_data[row_id].length; col_id++) { 
            row_html += "<td>" + csv_data[row_id][col_id] + "</td>";
          }
          
        row_html += "</tr>";
        $('#directory tbody').append(row_html);
      }

      $("#directory").DataTable(datatables_options);

      if (allow_download)
        $("#" + el).append("<p><a class='btn btn-info' href='" + csv_path + "'><i class='glyphicon glyphicon-download'></i> Download as CSV</a></p>");
    });
}

Here is the JS for the CSV to HTML JS, This is what is creating the table itself... I have a known good CSV that works but as soon as you edit in notepad or excel (saving in excel as macintosh format) it breaks it working and produces the above error.

I am not seeing a blank line.

Rossm812

I see where there is a blank row at the end in the debug data now- but how is it getting there? How would I parse that from the HTML table when I am using javascript to convert a csv on the fly>? Code is above for that file.

kthorngren

Maybe in your for loop see if csv_data[row_id][col_id] is blank and if so then don't append it to row_html.

Kevin

Rossm812

I am not entirely positive on how to do that.

kthorngren

I'm not terribly familiar with Javascript either but I think something like the below may work. Might need to fix syntax errors ;-) Basically if the length of the row is not equal to 0 then it processes the row. Post back if this doesn't work and someone more knowledgable of JS will help.

Kevin

EDIT: To make the script more precise you can check if the length is 3 csv_data[row_id].length == 3.

      for (row_id = 1; row_id < csv_data.length; row_id++) {
        if ( csv_data[row_id].length != 0 ) { 
            var row_html = "<tr>";
            for (col_id = 0; col_id < csv_data[row_id].length; col_id++) {
              row_html += "<td>" + csv_data[row_id][col_id] + "</td>";
            }
            row_html += "</tr>";
            $('#directory tbody').append(row_html);
        }
      }

Rossm812

Tried a few variations and this didn't work, It looks like it should though.