Get CSV into array using jquery-csv

Question

I am trying to get data from the following CSV which is in my local folder as bids.csv:

1, 3000
4, 2500
15, 2000

into an array. I'm using the jquery-csv library but without success.

Here is my entire code:

<html><head>
  <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
  <script src="jquery-csv.js"></script>
</head>
<body>
  <script type="text/javascript">
  data = $.csv.toArray('bids.csv');
  console.log(data)
  </script>
</body></html>

When I go to JS console in chrome, there is indeed an array in the console, but it seems to not have my data that I was looking for, instead a huge amount of guff. I can only assume this is the default array that jquery-csv outputs and that it is not reading my csv for some reason.

score 3 · Answer 1 · edited Apr 02 '22 at 13:16

This problem happens because you first need to retrieve the CSV file, then only pass it to jQuery-csv plugin.

As per the plugin documentation:

$.csv.toArray(csv);

[...]

csv (required) The csv data to be transformed.

The code shared in your question considers bids.csvto be the CSV data.

Assuming the file is accessible from a server (localhost works):

One way to retrieve the CSV data is to emit an Ajax GET request, jQuery's has a feature built-in for this: jQuery.get.

The solution would then be:

<html><head>
  <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
  <script src="jquery-csv.js"></script>
</head>
<body>
  <script type="text/javascript">
  // sent a GET request to retrieve the CSV file contents
  $.get( "bids.csv", function( CSVdata) {
     // CSVdata is populated with the file contents...
     // ...ready to be converted into an Array
      data = $.csv.toArray(CSVdata);
      console.log(data)
  });
  </script>
</body></html>

It is left as an exercise to the reader to manage errors which may happen either during the file retrieval, or during the conversion.

If you don't want to carry the somewhat heavy jQuery library, other libraries you may want to look at are:

papaParse
d3-request and d3-dsv

ah i see, it thought the string 'bids.csv' was the entire file.. so no wonder it didn't work!! I am a super noob at this. Thanks for your code. I am now getting a new error (Uncaught Error: CSVDataError: Illegal Data [Row:1][Col:2]) but I will see if I can figure this out myself (bit confused so far, as you can see there is no column 2, only 0 and 1). — mcplums, Mar 19 '19 at 15:46
You're welcome. For the other error you get, check this question: https://stackoverflow.com/questions/23038327/reading-csv-error-illegal-data-whats-happening — Mehdi, Mar 19 '19 at 17:11

score 0 · Answer 2 · answered Mar 19 '19 at 15:40

0

I can see that you added the file name to the array. You need to read the file using FileReader and then use the toArrays() function.

You can see the example here

answered Mar 19 '19 at 15:40

Sreeraj

21
2

Get CSV into array using jquery-csv

2 Answers2