Javascript load multiple csv and create global reachable array

Question

I need to load a lot of csv files. Yet Im loading with this function.

$.ajax({
  url: 'my.csv',
  dataType: 'text',
}).done(successFunction);

Then I run successFunction, with that I create array and with same code as above, but with different name of function I create another array and so on. Thats o lot of same code. What is the simpliest way to load multiple csv and return array?

Important I need to sometimes create 2 dimensional array another time 5 etc. So function must include parameter for that.

For creating array im using function like this:

function successFunction(data) {
  var promenna = data.replace(/\n/g,";").split(";");
  var result = [];
  for (var i = 0; i < promenna.length; i+=2) {
  var line = [];
    line.push(promenna[i]);
    line.push(promenna[i+1]);
    result.push(line);
  }
  for (var i = 0; i < result.length; i += 1){
    $("#tyden" + i + "").append(result[i][0]);
    $("#tyden" + i + "kolik").append(result[i][1]);
  }
}

But for another file I repeating basicly the same code. I don't know how to use one function for all files.

Answer 1

Something a little more es6-ish

var urls = ['csv1.txt', 'csv2.txt', 'csv3.txt', 'csvN.txt']
var csvArr = await Promise.all(urls.map(url => fetch(url).then(res => res.text())))

> [csvContent1, csvContent2, csvContent3, csvContentN]

Answer 2

First off, I disrecommend using your own CSV parser. This problem has been solved, use a library.

The other part of the problem is "I need to load many files via HTTP with jQuery", and that's easy.

1. Prepare a list of file urls.
2. Turn that into a list of requests.
   • You can use jQuery's .then() to transform the incoming data on the fly.
   • In this case, passing it through the CSV parser would be the transformation.
   • You can use jQuery's .done() to handle responses individually, as they come in.
3. Optional: Wait for the requests to complete.
   • You can use jQuery's .when() to wait on multiple async operations.
   • You can use jQuery's .done() to handle responses collectively.

So:

var files = ['csv1.txt', 'csv2.txt', 'csv3.txt', 'csvN.txt'];

var requests = $.map(files, function (i, url) {
    return $.get(url).then(CSV.parse);
});

$.when.apply($, requests)
    .done(function (csvObjects) {
        // everything has loaded successfully
        $.each(csvObjects, function (i, csv) {
            // do something with each file
        });
    })
    .fail(function (jqXhr, status, error) {
        // something went wrong, handle the error
    });

Necessary reading: https://api.jquery.com/category/deferred-object/