CSV to array - jquery and ajax problem

Question

I'm trying to implement a function which would load a server-stored CSV file, and parse it into an array. I have some issues with it and would be grateful for help.

Here's how the function looks like at the moment:

  function getSeries(filename){
   //create an array where objects will be stored.
   var seriesInFile=[];
   $.get('/public/csv/'+filename+'.csv',
        function(data) {
            // Split the lines
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                //elements from each line are taken and stored
                series = {
                             //some other attributes here, I took them off for this example
                             data: []
                         }
                $.each(items, function(itemNo, item) {
                        series.data.push(parseFloat(item));
                });
               seriesInFile.push(series);
            });
        console.log(seriesInFile); //it works here!
        });
     return seriesInFile;
    }; 
   console.log(getSeries('hr'));
   console.log(getSeries('hr'));

So, the problem is that even though I successfully get information from the CSV file and store it within 'seriesInFile' within the $.each function, as soon as I get out of it it doesn't work anymore - whole function returns an empty array. I guess it might have something to do with the get() function being deployed a bit later than the original getSeries one. Is there a simple solution for it?

Thanks,

Why don't you do the processing server side and use json to transmit it? — Femaref
– Femaref, Commented Jun 13, 2011 at 10:20

Nicola Peluchetti · Accepted Answer · 2011-06-13 11:08:48Z

1

I think you must return seriesInFile from the callback function of $.GET

  function getSeries(filename){
   //create an array where objects will be stored.
   var seriesInFile=[];
   $.get('/public/csv/'+filename+'.csv',
        function(data) {
            // Split the lines
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                //elements from each line are taken and stored
                series = {
                             //some other attributes here, I took them off for this example
                             data: []
                         }
                $.each(items, function(itemNo, item) {
                        series.data.push(parseFloat(item));
                });
               seriesInFile.push(series);
            });
        console.log(seriesInFile); //it works here!
        // do what you need to do with seriesInfile here 
        //like calling a function to display it

        });
      //here seriesInFile is an empty array; 
    };

Since $.GET makes an asynchronous call to the server, all the other code gets executed: in your example you return seriesInFile as an empty array because your function doesn't wait for the AJAX call to be completed and just returns seriesInFile as you declared it. If you want to return it you must do so in the callback function of $.GET that is executed on success of the AJAX call.

EDIT - As suggested in the comment returning from the callback probably doesn't work (never tried it). Usually you should do whatever you need to do directly from the callback function (that's what i usually do ). If you need help with something in particular i can help

edited Jun 13, 2011 at 11:08

answered Jun 13, 2011 at 10:29

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Codo Over a year ago

Your analysis is correct: The GET request is asynchronous and completes long after the function getSeries has returned. I don't think your code is useful though. Just returning the array from the callback won't make any difference.

Codo · Accepted Answer · 2011-06-13 11:05:04Z

As Nicola Peluchetti correctly pointed out, the GET request is asynchronous. That means it starts when you called $.get but if finishes later. The function getSeries returns immediately. At this point in time, the array is still empty because the GET request hasn't finished.

Whatever you want to do with the parsed CSV data, you have to initiate it from callback of the GET request and not from the function that called getSeries (which would better be called startSeriesRetrieval).

So it could look like this (displaySeries is called to further work with the retrieved data):

function startSeriesRetrieval(filename) {
  $.get('/public/csv/'+filename+'.csv',
    function(data) {
      // Split the lines
      var lines = data.split('\n');
      var seriesInFile=[];
      $.each(lines, function(lineNo, line) {
        var items = line.split(',');
        //elements from each line are taken and stored
        series = {
          //some other attributes here, I took them off for this example
          data: []
        }
        $.each(items, function(itemNo, item) {
          series.data.push(parseFloat(item));
        });
        seriesInFile.push(series);
      });
      displaySeries(seriesInFile);
    }
  );
};

Collectives™ on Stack Overflow

CSV to array - jquery and ajax problem

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related