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>

• adeneo: And what format is the CSV in, and what do you expect to get back?
• Alex Newport: Forgot to include the data in the csv file. It reads like this :
• Alex Newport: test,test2 I want to be able to return the string test 2 when [1] is used
• Endless: csvType is wrong... a csv use text/csv as a mimetype
• Alex Newport: tried it with text/csv, doesn't work at all. Simply returns not supported.

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>

• Alex Newport: Doesn't work, just returns "not supported" when I choose the csv file. Worked on the code I showed in my question.
• user3297291: I changed the csvType to text/csv in my snippet for testing. Change it back to whatever type you're using before trying it out. I don't know what you'll get when you try to parse an excel file though. Have you exported to .csv or are you trying to load a .xls?
• Alex Newport: Tried it and it works but I don't think you understand what I wanted it to do. I just wanted it to take the data from the csv file and place it in to an array. I didn't want it to print the data from the array to the screen only to place it into an array within a variable which I can use for other functions later, not print anything to the screen.
• user3297291: You're expecting me to deliver a snippet you can copy and paste, but what I tried to do was to show you how you can solve your problem. Printing it to screen is just the means to show you what is happening, not the goal. If you would take the time to read the answer properly, you'll see a process method that makes an array of each line. In the future, when somebody takes the time to help you out, try to invest some time as well in to trying to understand the suggestion, and don't just say "Doesn't work"
• user3297291: TL;DR: Copy the process method, remove the JSON.stringify from its return statement, and you're ready to go.