Geek Answers Handbook

Reading in local csv file in javascript?

[EDIT] I solved the problem using D3 , nevermind thank you!

So, I have a csv file that looks something like this, and I need to import the local csv file into client side javascript:

"L.Name", "F.Name", "Gender", "School Type", "Subjects" "Doe", "John", "M", "University", "Chem I, statistics, English, Anatomy" "Tan", "Betty", "F", "High School", "Algebra I, chem I, English 101" "Han", "Anna", "F", "University", "PHY 3, Calc 2, anatomy I, spanish 101" "Hawk", "Alan", "M", "University", "English 101, chem I"

I ultimately need to parse it and output something like:

 Chem I: 3 (number of people taking each subject) Spanish 101: 1 Philosophy 204: 0

But for now, I'm stuck just importing it into javascript.

My current code is as follows:

 <!DOCTYPE html> <html> <body> <h1>Title!</h1> <p>Please enter the subject(s) that you wish to search for:</p> <input id="numb" type="text"/> <button onclick="myFunction()">Click me to see! :) </button> <script> function myFunction() { var splitResearchArea = []; var textInput = document.getElementById('numb').value; var splitTextInput = textInput.split(","); for(var i =0; i<splitTextInput.length; i++) { var spltResearchArea = splitTextInput[i]; splitResearchArea.push(spltResearchArea); } }

I researched and found useful links to Stackoverflow, for example, and this , but I'm new to javascript, and I don't quite understand this. Should I use Ajax? FileReader? Jquery What are the benefits of using one over the other? And how would you implement this in code?

But yes, I'm just confused as I am very new to javascript, so any help in the right direction would be great. Thanks!!

+7
javascript jquery ajax csv filereader
source share
3 answers

Here's how to use readAsBinaryString() from the FileReader API to load a local file.

 <p>Select local CSV File:</p> <input id="csv" type="file"> <output id="out"> file contents will appear here </output>

Basically, you just need to listen to the change event in <input type="file"> and call the readFile function.

 var fileInput = document.getElementById("csv"), readFile = function () { var reader = new FileReader(); reader.onload = function () { document.getElementById('out').innerHTML = reader.result; }; // start reading the file. When it is done, calls the onload event defined above. reader.readAsBinaryString(fileInput.files[0]); }; fileInput.addEventListener('change', readFile);

jsFiddle

+17
source share

I use this library from google: https://github.com/evanplaice/jquery-csv/ Firstly - do you have

 $.get(ur_csv_file_path);

and then use the manual from the page

+2
source share

There are so many ways to accomplish what you want, as you might imagine.

If I did this, I could start by breaking the input text into lines as follows:

 var lines = inputText.split('\n');

Then I will extract the header names from the first line. You need a function to read the values ​​from each row.

 // This assumes no commas in the values names. function getCsvValuesFromLine(line) { var values = lines[0].split(','); value = values.map(function(value){ return value.replace(/\"/g, ''); }); return values; } var headers = getCsvValuesFromLine(lines[0]);

Then I will iterate over the remaining rows and create an array of objects representing the values ​​in the rows.

 lines.shift(); // remove header line from array var people = lines.map(function(line) { var person = {}, lineValues = getCsvValuesFromLine(line); for(var i = 0; i < lines.length; i += 1) { person[headers[i]] = lineValues[i]; } return person; });

If all this works, you should get an array of objects representing the values ​​in each line of your CSV.

The above example is code example. I have not tested it, and this, of course, is not ready for production, but I hope this will give you an idea of ​​how to do what you want.

I used several built-in Javascript functions. I suggest looking at MDN if you are not familiar with them; they know well.

Finally, there is an odd quirk in Javascript with its automatic insertion with a comma (a bad feature of the language, IMO). To avoid problems, do not put a new line in front of the opening bracket.

Always write

 XXXX { .... }

and do not write

 XXXX { .... }
+1
source share

More articles:


All Articles