Home>

What I want to do is read multiple csv files, put them in an array, and then do the callback process.
In callback, processing using these two arrays is performed.
But it doesn't work. The following is the relevant part. It may be a confusing source, partly because i am not familiar with how to use XMLHttpRequest. I'm sorry.

function csvData (dataPathSV, dataPathL, callback) {
    const requestSV = new XMLHttpRequest ();// Read the file via HTTP
    const requestL = new XMLHttpRequest ();
    var response SV;
    var responseL;
    requestSV.addEventListener ('load', (event) =>{// Load and execute
        responseSV = event.target.responseText;// Returns the received text
    });
    requestSV.open ('GET', dataPathSV, true);// Specify the path of csv
    requestSV.send ();
    requestL.addEventListener ('load', (event) =>{// Load and execute
        responseL = event.target.responseText;// Returns the received text
    });
    requestL.open ('GET', dataPathL, true);// Specify the path of csv
    requestL.send ();
    loadCsvData (responseSV, responseL, callback);
}
function loadCsvData (dataSV, dataL, callback) {
  console.log (dataSV);
  const dataString = dataSV.split ('\ n');// Split with line breaks
  for (let i = 1;i<dataString.length;i ++) {// Skip the first line
      vocabPosition [i] = dataString [i] .split (',');
  }
  dataString = dataL.split ('\ n');// Split with line breaks
  for (let i = 1;i<dataString.length;i ++) {// Skip the first line
      resultLDAArray [i] = dataString [i] .split (',');
  }
  callback ();
}


As it is, there is nothing in dataSV, so I get angry that I can't split ('\ n').
Is there any good way?
I look forward to working with you.

  • Answer # 1

    Process with Promise or within the fetch chain

  • Answer # 2

    1. Read in parallel

    The two xhrs have different latencies depending on the network and server status, and the read completion order is not fixed, so it is necessary to check whether multiple data have been received. Also, if even one is not completed, callback will not be called, so a separate retry check (onerrorEtc.: Omitted here)

    When written in solid, it has the following form

    var rslts = {
      data1: null,
      data2: null
    };
    function cmplAll () {
      return "data1" in rslts&&"data2" in rslts;
    }
    var xhr1 = new XMLHttpRequest ();
    xhr1.onload = function (evt) {
      rslts.data1 = evt.target.result;
      if (cmplAll ()) {
        // callback (see rslts to read all data)
      }
    }
    xhr1.open (/ * omitted * /);
    xhr1.send ()
    var xhr2 = new XMLHttpRequest ();
    xhr2.onload = function (evt) {
      rslts.data2 = evt.target.result;
      if (cmplAll ()) {
        // callback (same as xhr1 example)
      }
    }
    xhr2.open (/ * omitted * /);
    xhr2.send ()

    * Since xhr is a disposable instance, it is written with the onload property.

    2. Read sequentially

    Same as Lhankor_Mhy's answer, it is easy to understand.

    var xhr1 = new XMLHttpRequest ();
    xhr1.onload = function (evt1) {
      var rslt1 = evt1.target.result;
      var xhr2 = new XMLHttpRequest ();
      xhr2.onload = function (evt2) {
        var rslt2 = evt2.target.result;
        // Since it is the timing when rslt1 and rslt2 are obtained, callback
      }
      xhr2.open (/ * omitted * /);
      xhr2.send ()
    }
    xhr1.open (/ * omitted * /);
    xhr1.send ()

    3. Flow control by Promise

    Remember fetch. (Parallel reading can also be described simply with Promise.all ())

  • Answer # 3

    The callback function should be called from within the load event listener.

      requestSV.addEventListener ('load', (event) =>{// Load and execute
            loadCsvData (...);
        });

    However, in this case, both events must be finished, so why not call the loadCsvData function on condition that both events are fired, such as by using a flag?


    I think it's easier to understand the code if you use Promise.all ().

Related articles