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
I came across a couple of jQuery plugins that can parse local (client) CSV files directly:
- http://papaparse.com/
- http://github.com/evanplaice/jquery-csv
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.
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>
Regards
Tarun
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.
