Search code examples
javascriptcsvparsingd3.jspapaparse

Simple CSV parsing in Javascript

Here is my problem:

I am trying to parse a local CSV file in JavaScript. The file looks like this:

Year,Promo,Surname,Name,Mail
2005/2006,0,XXXX,XXXXX,[email protected]
(...)
2006/2007,1,XXXX,XXXXX,[email protected]
(...)
2007/2008,2,XXXX,XXXXX,[email protected]
etc.

I tried to parse it using several librairies (PapaParse.js, jquery-csv, d3.js...), but:

  • either the parsing fails (my array is empty)

  • or I get a XMLHttpRequest cannot load - Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource error, since my file is stored locally.

Is there a simple solution to parse a CSV file in JavaScript, in order to access the data? I looked up hundreds of posts on forums but I could not get it to work.

Thank you very much (excuse me, I am quite new in JS).

Tom.

Solution

  • this answer is canonical in that it addresses anyone's problem that might be described by the question. Only the first of these answers is meant for the OP, although, regarding the last comment, the edit section I added at the bottom is also specifically for the OP.

    if you are doing this for a small, local app, you probably can do one of these two things:

    1. launch the browser with CORS disabled:

    Chrome.exe --disable-web-security

    in the source there is also instructions for firefox

    src

    1. run a micro server for your files:

    If you’ve got Python installed (most Mac and Linux users do), you can start a quick local web server for testing. Using the command prompt, navigate to the directory that has your HTML files and run the following command:

    python -m SimpleHTTPServer

    Your files should now be accessible from http://localhost:8000/ and may have a good chance of working when file:/// does not.

    src

    A better solution, if you run into CORS issues with the python server, might be local-web-server from node: https://www.npmjs.com/package/local-web-server

    the typical user looking for an answer to this question is probably using node: 

    'use strict';

var fs = require('fs');

var readFilePromise = function(file) {
  return new Promise(function(ok, notOk) {
    fs.readFile(file, function(err, data) {
        if (err) {
          notOk(err)
        } else {
          ok(data)
        }
    })
  })
}

readFilePromise('/etc/passwd').then(function(data) {
  // do something with the data...
})

    src

    edit: setting it up for a simple application:

    Make the server a serivce in rc.d or wherever. Follow a guide like this: https://blog.terminal.com/using-daemon-to-daemonize-your-programs/

    Don't make the server a local service that is active! Instead, make a script to launch your app, and only from that script start the daemon. In your init script for the service, write a check to look for your app's PID or something every few minutes and autoshutdown when the app is no longer running.