Papa parse runs out of order

Question

With PapaParse I'm parsing a csv file which I then add to variable dataShort and dataTotal. I am able to log both dataShort and dataTotal inside of the complete function but not below it. I suppose this happens because the function runs asynchronously.

As a result of that the following functions (both changeData and dataReady) can't run successfully since they require Papa Parse to be done with parsing. How can I make changeData(); in the function parseCSV run only when the parsing above is complete?

function parseCSV(evt) {
    var file = evt.target.files[0];

    Papa.parse(file, {
        header: true,
        dynamicTyping: true,
        complete: function (results) {
            dataShort = results.data;
            dataTotal = results.data;
            console.log(results.data);
            console.log("dataShort: " + dataShort);
            console.log("dataTotal: " + dataTotal);
        }
    });
    console.log("dataShort: " + dataShort);
    console.log("dataTotal: " + dataTotal);
    
    changeData();
}



function changeData() {
    $.each(dataShort, function (index, item) {

        if (item["Items in CHILDoc"].length > 20) {
            item["Items in CHILDoc"] = item["Items in CHILDoc"].substring(0, 18) + "...";
        }
        if (item["Kwadrant onderdeel in CHILDoc"] != "Ingrijpende gebeurtenissen" && item["Waarde in CHILDoc"].length > 20) {
            item["Waarde in CHILDoc"] = item["Waarde in CHILDoc"].substring(0, 15) + "...";
        }
    })
    //            console.log(dataShort);
    //            console.log(dataTotal);
    dataReady();
}

Soham · Answer 1 · 2018-05-25T17:01:19.717

You are right about it running asynchronously. You can directly call your changeData function from complete event function. So try something like this:

function parseCSV(evt) {
  var file = evt.target.files[0];
  Papa.parse(file, {
    header: true,
    dynamicTyping: true,
    complete: function(results) {
      dataTotal = results.data;
      dataShort = results.data;
      changeData(dataShort);       
    }
  });
}

function changeData(var ds) {
  $.each(ds, function(index, item) {
    if (item["Items in CHILDoc"].length > 20) {
      item["Items in CHILDoc"] = item["Items in CHILDoc"].substring(0, 18) + "...";
    }
    if (item["Kwadrant onderdeel in CHILDoc"] != "Ingrijpende gebeurtenissen" && item["Waarde in CHILDoc"].length > 20) {
      item["Waarde in CHILDoc"] = item["Waarde in CHILDoc"].substring(0, 15) + "...";
    }
  });
  dataReady();
}

Here, I changed the changeData function to accept result data and calling it from the complete function. ~~Note that, I remove dataShort and dataTotal variables as I did not see any use of it here but do revert it back, if you are using them further somewhere in your code.~~

Edit: dataShorts gets modified after calling changeData function but dataTotal would still have the original result. I am assuming you are declaring both dataShort and dataTotal variables somewhere on the top.

What I would like to happen is that so the data in array dataShort gets indeed shortened by the function changeData but the array dataTotal remains unchanged. As of now, when I run the code I posted above with changeData(); placed in the complete, somehow results.data gets changed by changeData, not dataShort. I use dataShort to add a span with text so even long data entries fit the divs I made. dataTotal is used to add titles to the shortened spans so the text can still be read. — Mart Fijten, May 25 '18 at 14:21

Papa parse runs out of order

1 Answers1