Read .csv file to object/array in javascript

Question

I'm trying to do something that I think is fairly simple, but doesn't seem to be working. I have a .csv file in the same directory as my script file. I want to create an object or an array using the data from the .csv file. How do I access the local file using javascript?

Sorry for the lack of code, but I don't even know which route to go down; I've tried .get and ajax and this plugin but I just don't know what I'm doing. Could someone give me a clear example of how to load the file and print it in a div?

• Jonah Williams: same directory on server or on client machine? If you want to open client files you will need to use the fileReader api (developer.mozilla.org/en-US/docs/Web/API/FileReader). If you are doing it server side, it depends on what you are running.
• user3175088: It would be on the sever. That said, in my testing process, my file structure is just on my desktop - I'm not running it as a server.
• sergeyz: Well, that have to be one or the other. APIs are different for fetching a file with a file (file://) or HTTP (http://) protocol.

Answer 1

In order to simulate a static file server, you can run an http server using python on the command line. This is necessary to use ajax requests.

python -m SimpleHTTPServer 

Or if you have python 3

python -m http.server

Now there are two parts to getting that file to a webpage. 1) make an ajax request, 2) parse the csv. There are many different libraries that implement ajax requests, but in this case you might find the easiest out of the box solution which combines both is d3.js.

d3.csv("filename.csv", function(err, data) {
 // csv is parsed into an array of objects, as data
});

Of course this will only work if you are loading your page from localhost.

EDIT:

Make sure you run your http server from the location of your index.html file. then the request you make in the d3.csv function is relative to index. finally, the data is only available inside the callback, and any error message (or null) will be put inside the err argument.

Project
|
+-- index.html
| 
+-- data
| | 
| \-- dataset.csv

Then the code in index.html would look like

d3.csv("data/dataset.csv", function(err, data) {
 if (err) console.log(err) // error messages
 console.log(data); // should contain the parsed csv
});

• user3175088: This seems like a good solution! However, I'm struggling to understand how to display the data from the documentation. Could you point me int he right direction? I keep getting null.
• user3175088: Thank you - your edit cleared it up! I'm not able to access the data!
• Jonah Williams: are you getting an error message? I'm not sure I can provide any more help without seeing some of the code
• user3175088: Ack, sorry. Typo. I AM able to access the data. Thank you again.
• Jonah Williams: ahh okay, happy coding! :D

Answer 2

PapaParse() does an excellent job here, for example this will do the job for you:

Papa.parse(file, {
 complete: function(results) {
 console.log("Finished:", results.data);
 }
});

DEMO