Search code examples
javascriptjquerycsvjquery-csv

Combine multiple CSV files into one 2D array


I want to combine multiple CSV files into one 2D array using a loop using jquery.

    function drawChart(){
    
    filename="/projectUCF/SN00.csv";
    $.get(filename, function(csvString){
      var arrayData1 = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
      var removeRows = 1;
      while (removeRows--) {
        arrayData1.shift();
      }
      filename="/projectUCF/SN01.csv";
      $.get(filename, function(csvString){
      var arrayData2 = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
      var removeRows = 2;
      while (removeRows--) {
        arrayData2.shift();
      }
     
     var arrayData=[...arrayData1,...arrayData2];
     console.log(arrayData);

     var data = new google.visualization.arrayToDataTable(arrayData);
      
      var view = new google.visualization.DataView(data);
      view.setColumns([1,5]);
      
      
      var options = {
          title: "Battery State of Charge (7 days)",
          hAxis: {format: 'M/d hh:mm'},
          vAxis: {title: "Charge Level (in Percentage)", minValue:0, maxValue:100},
      legend: 'none'
      };
     chart.draw(view,options);  
     }); 
     });

     }

Instead of using $.get multiple times, I want to use a loop. I am new to this, so any help is appreciated.


Solution

  • One way to do this is to use Promise.all. It takes an array of promises and calls a single callback when all of them have resolved. So you could restructure the retrieve/parse part of your code like this:

    var filenames = ["/projectUCF/SN00.csv", "/projectUCF/SN01.csv"];
    var promises = [];
    
    // create array of promises, one per file, that resolve after the file is retrieved a resolve with the parsed data
    filenames.forEach(function (filename) {
        promises.push(new Promise(function (resolve, reject) {
            $.get(filename, function (csvString) {
                var fileData = $.csv.toArrays(csvString, { onParseValue: $.csv.hooks.castToScalar });
                var removeRows = 1;
                while (removeRows--) {
                    fileData.shift();
                }
                resolve(fileData);
            });
        }));
    });
    
    // wait until all files have been retrieved, then continue
    Promise.all(promises).then(function (results) {
        var arrayData = [];
        results.forEach(function (fileData) {
            arrayData.push(...fileData);
        });
    
        // remaining code goes here
    });