Put data from a csv file into an array (Javascript)

Question

I need to be able to take data from a CSV file (which has been chosen by the user via <input type="file" id="fileInput"> ) and put it into an array. Id rather avoid using jquery as I haven't used it before but any help would be appreciated. Here's my code:

<div id="page-wrapper">
  <div>
    Select a text file: 
    <input type="file" id="fileInput">
  </div>
  <pre id="fileDisplayArea"><pre>
</div>
<p id="csvData"></p>
<button onClick="test()">Show Text</button>

<script>
function test (){
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'application/vnd.ms-excel';

  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML=reader.result;
    }

    reader.readAsText(file);  
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}
</script>

Answer 1

To process a csv type file, there's two things you need to do:

• Split in to lines
• Split in to columns

You can do both by using String.prototype.split . This method splits a string into an array. To split on each new line, use the regex /\\n/ . To split each column, use the character that is used in your data (probably , or ; ).

Here's an example:

 // Create an array of arrays // Remove first line // Split by "," function process(dataString) { var lines = dataString .split(/\\n/) // Convert to one string per line .map(function(lineStr) { return lineStr.split(","); // Convert each line to array (,) }) .slice(1); // Discard header line return JSON.stringify(lines, null, 2); } function test() { var file = fileInput.files[0]; var textType = /text.*/; var csvType = 'text/csv'; if (file.type.match(csvType)) { var reader = new FileReader(); reader.onload = function(e) { document.getElementById("csvData").innerHTML = process(reader.result); } reader.readAsText(file); } else { fileDisplayArea.innerText = "File not supported!"; } } 

 <div id="page-wrapper"> <div> Select a text file: <input type="file" id="fileInput" /> </div> <pre id="fileDisplayArea"></pre> <pre id="csvData"></pre> <button onClick="test()">Show Text</button> </div> 

Store this data snippet as a .csv file to test:

ONE,TWO,THREE
1,2,3
2,4,6
3,6,9

An additional note: if there is a header row in your data, like in the example above, I'd strongly suggest to not map to arrays, but to objects. This makes your code easier to read and use:

 // Create an array of objects // Use the first line as keys // Split by "," function process(dataString) { var lines = dataString .split(/\\n/) .map(function(lineStr) { return lineStr.split(","); }); var keys = lines[0]; var objects = lines .slice(1) .map(function(arr) { return arr.reduce(function(obj, val, i) { obj[keys[i]] = val; return obj; }, {}); }); return JSON.stringify(objects, null, 2); } function test() { var file = fileInput.files[0]; var textType = /text.*/; var csvType = 'text/csv'; if (file.type.match(csvType)) { var reader = new FileReader(); reader.onload = function(e) { document.getElementById("csvData").innerHTML = process(reader.result); } reader.readAsText(file); } else { fileDisplayArea.innerText = "File not supported!"; } } 

 <div id="page-wrapper"> <div> Select a text file: <input type="file" id="fileInput" /> </div> <pre id="fileDisplayArea"></pre> <pre id="csvData"></pre> <button onClick="test()">Show Text</button> </div>