Loading CSV file into Javascript array

Question

I am developing a webpage in Wordpress. The web page should have a combo box with all counties. I have a data set in csv format, which has about 10 thousand lines for all of these districts. When a user selects a county from the drop-down list, I want only the selected county data displayed on the web page. This is my requirement.

In wordpress, on my webpage I am adding a js file using

<script type="text/javascript" src="http://xxx/wp content/uploads/2014/05/countyList1.js"></script> 

and the code for the dropdown menu of the webpage is

 <select name="county" id="county" onload="setCounties();" onchange="getSelectedCountyData();"></select> 

In the countyList1.js file, I have setCounties () and getSelectedCountyData () functions.

So far I see a drop-down list with a list of counties. I do not know how to read the CSV file and apply the selected county filter to this list.

I tried the FileReader object, and I can download the CSV content on the web page, but I do not want the user to select the CSV. I already have a dataset.

I am trying to use this jquery.csv-0.71 library from this SO post How to read data from a * .CSV file using javascript? but i need help.

Here is the code that gets called when choosing a county

 function getSelectedCountyData() { cntrySel = document.getElementById('county'); //selCty = countyList[cntrySel.value]; handleFiles(); } function handleFiles() { $(document).ready(function () { $.ajax({ type: "GET", url: "D:\Docs\Desktop\csvfile.csv", dataType: "csv", success: function (data) { processData(data); } }); }); } function processData(allText) { var allTextLines = allText.split(/\r\n|\n/); var headers = allTextLines[0].split(','); var lines = []; for (var i = 1; i < allTextLines.length; i++) { var data = allTextLines[i].split(','); if (data.length == headers.length) { var tarr = []; for (var j = 0; j < headers.length; j++) { tarr.push(headers[j] + ":" + data[j]); } lines.push(tarr); } } console.log(lines); drawOutput(lines); } function drawOutput(lines) { //Clear previous data document.getElementById("output").innerHTML = ""; var table = document.createElement("table"); for (var i = 0; i < lines.length; i++) { var row = table.insertRow(-1); for (var j = 0; j < lines[i].length; j++) { var firstNameCell = row.insertCell(-1); firstNameCell.appendChild(document.createTextNode(lines[i][j])); } } document.getElementById("output").appendChild(table); } 

Answer 1

I highly recommend learning this plugin:

http://github.com/evanplaice/jquery-csv/

I used this for a project that processes large CSV files, and it is very good at CSV parsing. You can use this to call the local file that you specified in your code, so that you are not dependent on downloading the file.

Once you enable the plugin above, you can substantially analyze the CSV using the following:

 $.ajax({ url: "pathto/filename.csv", async: false, success: function (csvd) { data = $.csv.toArrays(csvd); }, dataType: "text", complete: function () { // call a function on complete } }); 

Now everything will live in a dataset so that you can manipulate as needed. I can provide additional examples for processing array data if you need to.

There are many great examples on the plugins page that can be used for different purposes.

Answer 2

If you are not too worried about file size, it might be easier for you to store the data as a JS object in another file and import it into your own. Either synchronously or asynchronously using the syntax <script src="countries.js" async></script> . Saves you the need to import a file and analyze it.

However, I can understand why you do not want to rewrite 10,000 entries, so here was written the basic object-oriented csv parser that I wrote.

 function requestCSV(f,c){return new CSVAJAX(f,c);}; function CSVAJAX(filepath,callback) { this.request = new XMLHttpRequest(); this.request.timeout = 10000; this.request.open("GET", filepath, true); this.request.parent = this; this.callback = callback; this.request.onload = function() { var d = this.response.split('\n'); /*1st separator*/ var i = d.length; while(i--) { if(d[i] !== "") d[i] = d[i].split(','); /*2nd separator*/ else d.splice(i,1); } this.parent.response = d; if(typeof this.parent.callback !== "undefined") this.parent.callback(d); }; this.request.send(); }; 

What can be used as follows:

 var foo = requestCSV("csvfile.csv",drawlines(lines)); 

The first parameter is the file relative to the position of your html file in this case. The second parameter is an additional callback function that runs when the file is fully loaded.

If your file has non-separating commmas, then it will not cope with this, since it simply creates 2d arrays, splitting them into returns and commas. You may want to look at the regular expression if you need this functionality.

 //THIS works "1234","ABCD" \n " !@ £$" \n //Gives you [ [ 1234, 'ABCD' ], [ ' !@ £$' ] ] //This DOESN'T! "12,34","AB,CD" \n " !@ ,£$" \n //Gives you [ [ '"12', '34"', '"AB', 'CD' ] [ '" !@ ', '£$' ] ] 

If you do not use OO methods; they create a new object (for example, a number, a string, an array) with their local functions and variables through the constructor function. Very handy in certain situations. This function can be used to download 10 different files with different callbacks at the same time (depending on your level of love csv!)

Answer 3

You cannot use AJAX to extract files from a user machine. This is absolutely the wrong way.

Use the FileReader API:

 <input type="file" id="file input"> 

JS:

 console.log(document.getElementById("file input").files); // list of File objects var file = document.getElementById("file input").files[0]; var reader = new FileReader(); content = reader.readAsText(file); console.log(content); 

Then parse the content as a CSV. Keep in mind that your parser does not currently consider escaped values ​​in CSV, for example: value1,value2,"value 3","value ""4"""

Answer 4

This is what I used to use the csv file in the array. Failed to get the above answers to work, but it worked for me.

 $(document).ready(function() { "use strict"; $.ajax({ type: "GET", url: "../files/icd10List.csv", dataType: "text", success: function(data) {processData(data);} }); }); function processData(icd10Codes) { "use strict"; var input = $.csv.toArrays(icd10Codes); $("#test").append(input); } 

It uses the jQuery-CSV plug-in linked above.