Load CSV file from local using js : no error but no view

Question

I am trying to load a local csv file to html table.When I load the html file in chrome I am unable to view the contents.The console says "navigated to file:///D:/report.html".There is no error message.

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "file:///D:/results.csv",
    success: function(data) {
      processData(data);
    }
  });
});

function processData(allText) {
  var record_num = 2;
  var allTextLines = allText.split(/\r\n|\n/);
  var entries = allTextLines[0].split(',');
  var lines = [];
  var headings = entries.splice(0, record_num);
  while (entries.length > 0) {
    var tarr = [];
    for (var j = 0; j < record_num; j++) {
      tarr.push(headings[j] + ":" + entries.shift());
    }
    lines.push(tarr);
  }
  var output = [],
    i;
  for (i = 0; i < lines.length; i++)
    output.push("<tr><td>" +
      lines[i].slice(0, -1).split(",").join("</td><td>") +
      "</td></tr>");
  output = "<table>" + output.join("") + "</table>";
  var div = document.getElementById('container');
  div.innerHTML = output;
}

table {
  border-collapse: collapse;
  border: 2px black solid;
  font: 12px sans-serif;
  align-content: center;
}

td {
  border: 1px black solid;
  padding: 5px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id='container'></div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>

I can't find where I made the mistake. Thanks in advance.

I answered a similar question before. Is it helpful for u? http://stackoverflow.com/a/42648408/4831179 BTW, how did u opened this page in ur chrome? What's its url? It matters. — blackmiaool, Mar 20 '17 at 05:31
@VinaySingh There are no errors.I just says "Navigated to file:///D:/report.html". — Nandhini Nagaraj, Mar 20 '17 at 05:36
@blackmiaool I ran from command prompt. "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files file:///D:/report.html URL : file:///D:/report.html — Nandhini Nagaraj, Mar 20 '17 at 05:38
@NandhiniNagaraj I tried the "--allow-file-access-from-files" before, and found that it doesn't always work. U can try the answer I posted above as an alternative if u don't mind. — blackmiaool, Mar 20 '17 at 05:42

score 0 · Answer 1 · answered Mar 20 '17 at 12:09

This is the correct code.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
           <style>
              table {
              border-collapse: collapse;
              border: 2px black solid;
              font: 12px sans-serif;
              }
              td {
              border: 1px black solid;
              padding: 5px;

              }
            </style>
     </head>
  <body>
    <div id='container'></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">

$(document).ready(function() {
   $.ajax({
       type: "GET",
       url: "./results.csv",
       success: function(data) {processData(data);}
    });
});

function processData(allText) {
    var lines = [];
    var tarr = [];
    var val;
    var record_num = 2; 
    var allTextLines = allText.split(/\r\n|\n/);
    for (var k = 0;k < allTextLines.length-1;k++){
          var entries = allTextLines[k].split(',');
          var headings = entries.splice(0,record_num);
          while (headings.length>0) {
             for (var j=0; j<record_num; j++) {
                 val = headings.shift();
                 tarr.push(val);
              }
          }
     }
    var output = [],
        i;
        for (i = 0; i < tarr.length-1; i++){
        output.push("<tr><td>"+ tarr[i].replace('"',"").slice(0,-1) + "</td><td>"+ tarr[i+1].replace('"',"").slice(0,-1) //my requirement is two columns
          + "</td></tr>");
        i++;
        }
        output = "<table>" + output.join("") + "</table>";
        var div = document.getElementById('container');
        div.innerHTML = output;
}

     </script>
  </body>

Load CSV file from local using js : no error but no view

1 Answers1