How to read local csv file in client side javascript?

Question

I have client side javascript that I want to read from a local csv file. In the html code, I import a local javascript file using a script tag and this js file is in another folder.

The contents of the js file

$.ajax({
    type: "GET",
    url: "./../../data/English.csv",
    dataType: "text",
    success: function(data) {
        alert("worked");
    },
    error: function (request, status, error) {
        alert(request.responseText);
    }
 });

The path to the csv file is relative to the html file. However the error function is triggered. Is there a way to fix this?

Thanks

Answer 1

I came across a couple of jQuery plugins that can parse local (client) CSV files directly:

1. http://papaparse.com/
2. http://github.com/evanplaice/jquery-csv

Answer 2

Ajax is for interacting with the remote server. Direct brower access to local files is blocked for security reason as user must give consent to access local files. The acceptable way is to go through the file picker UI and have the user pick a file, rather than having software prespecify a location.

I shared a library on GitHub html5csv.js [license: GPLv3] which depends on jQuery and manipulates local CSV or tabular data in various ways.

Here is a jsfiddle example of using a filepicker to select and display a table from a local csv file

From the main page: https://github.com/DrPaulBrewer/html5csv/blob/master/README.md

To "Upload" to the CSV app a file of CSV data from the user:

HTML

<input type='file' id='choose' />

Javascript (after loading jQuery and html5csv library)

CSV.begin('#choose').....go();

Where ..... is not literally ..... but a string of other html5csv.js library calls that are used (see the beginner page and wiki ) to access and manipulate the returned data. This statement defines an asynchronous workflow that begins with fetching the data and proceeds to each call, and go() is chained to indicate to start the workflow.

Let's say you have written a

function show(rows)

in your code to do something to the CSV data and show it, where rows is expected to be an array of arrays that represent the rows of the CSV file after it is read.

Your html5csv.js library call (with HTML file choose element as above) could be:

CSV.begin('#choose')
    .go(function(e,D){ 
       if(e) return console.log(e); 
       show(D.rows); 
      });

Available library functionality includes making tables, editing, graphing via integration with jqPlot, calling a user defined function, linear fits, and PCA.