10

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

omega
  • 40,311
  • 81
  • 251
  • 474

4 Answers4

4

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
Evan Plaice
  • 13,944
  • 6
  • 76
  • 94
Gaurav
  • 562
  • 3
  • 12
  • 2
    Links are great, but not very useful by themselves. It would be much more helpful if you could explain in the body of your answer how to use the linked resources to solve the OP's specific problem. – Pops Jan 21 '15 at 17:35
  • @Pops, something not better than nothing? A tutorial would have been more helpful than just sharing the links, but sharing links of the libraries I knew of was hopefully more helpful than just moving on. – Gaurav Feb 27 '15 at 21:23
  • hi, I use papaparse, but I hate the official site. It looks like they updated the version and partially updated the documentation. Some function does not work as they described. But here is a good article-tutorial to create a working example. http://www.joyofdata.de/blog/parsing-local-csv-file-with-javascript-papa-parse/ – Yevgeniy Afanasyev Apr 28 '15 at 22:56
1

I tried the following example on chorme :

    <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
test this
</body>
<script>
$.ajax({
    type: "GET",
    url: "English.csv",
    dataType: "text",
    success: function(data) {
        alert("worked");
    },
    error: function (request, status, error) {
        alert(request.responseText);
    }
 });
 </script>

I see following error on the console :

XMLHttpRequest cannot load file:///C:/temp/local/English.csv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Please see This answer for further details.

If you are trying to make it work only in your development environment then you can try starting chorme using following command :

chrome.exe --allow-file-access-from-files

Other alternative is to try :

    <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
test this
</body>
<script>

$.ajaxPrefilter( 'script', function( options ) {
    options.crossDomain = true;
});

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

 </script>
Tarun Gupta
  • 1,629
  • 1
  • 22
  • 39
  • So your answer to "Is there a way to fix this?" is...? – nnnnnn Mar 16 '14 at 03:36
  • I tried starting chrome with 'chrome.exe --allow-file-access-from-files' worked for me, Remember to close all the instances of chorme before trying this. – Tarun Gupta Mar 16 '14 at 03:44
1

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.

Paul
  • 26,170
  • 12
  • 85
  • 119
0

Spin up a testing server.

Yes, even if you're testing locally. If you just open the source file directly in a browser, ajax won't work. It needs a server to bounce requests off of.

Evan Plaice
  • 13,944
  • 6
  • 76
  • 94