Properly parsing local file with PapaParse

pceccon picture pceccon · Jan 10, 2016 · Viewed 11.1k times · Source

I need to parse some local files, and I found the PapaParse library.

It seems to be necessary to have a instance of File to be able to parse local files.

So I created this in my hmtl:

<label class="control-label">Files:</label>
<span class="btn btn-default btn-file">Browse 
    <input id="file-input" type="file" accept="text/comma-separated-values" runat="server" multiple> 
</span>
<script type="text/javascript">
var fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', function(event) 
{
    var input = event.target;
    console.log(input.files);
    if (input.files.length > 0)
    loadNoisePerRegion(input.files);
});
</script>

This is the function responsible for parsing the files:

function loadNoisePerRegion(files)
{
    regions_count = 149
    complaints_type = 18
    time_slots = 24

    console.log(files);
    for (i = 0; i < files.length; i++)
    {
        var results = Papa.parse(files[i], {delimiter:',', dynamicTyping:true, skipEmptyLines:true});
        console.log(results);
    }
}

The first console.log prints the list of files properly:

enter image description here

But the one that should print the file parsed prints undefined:

enter image description here

I also tried this:

function loadNoisePerRegion(files)
{
    regions_count = 149
    complaints_type = 18
    time_slots = 24

    var data;
    for (i = 0; i < files.length; i++)
    {
        Papa.parse(files[i], {delimiter:',', dynamicTyping:true, skipEmptyLines:true, 
                              complete: function(results) {
                                  data = results;
                              }});
        console.log(data);
    }
}

But got the same results.

To be specific, I'm reading 24 files with 149 lines and 18 columns each and I have to be able to fill a 3D array of dimensions 149x18x24. The number in the file represent its z coordinate, so I can't do this inside the complete function as a I have to be able to split the file name and get its number.

I'm definitely not expert in JavaScript/web, and I've been struggling with this for a while. I would like to be able to retrieve the parsed results.

Here is an example of the first lines of A0:

4.132523767643456539e-03,3.338056650702859052e-03,5.094068820554688640e-03,4.319352199708446222e-03,3.336436748977582127e-03,4.538557367580550554e-03,5.078650751493581431e-03,4.555551665273932863e-03,5.084069822892055800e-03,3.686315220687433510e-03,2.865154886232469320e-03,3.818313965958328778e-03,9.116708509848362590e-03,4.716984235548558543e-03,2.144280439848759989e-03,4.815674842039764994e-03,1.300910635568432172e-02,3.749492079670652123e-03
4.842012184270096282e-03,3.998360423928741351e-03,6.032359742843619241e-03,5.069118478958277614e-03,3.962735680903891645e-03,5.348581710052801100e-03,6.060137695773112031e-03,5.456990595265281616e-03,5.929390713573804740e-03,4.525055239080687589e-03,3.383705283438338644e-03,4.551759343211069647e-03,1.095692751267150940e-02,5.597012676156478198e-03,2.567732343893020051e-03,5.685926667065896445e-03,1.560915350120501387e-02,4.443829783777414333e-03
4.079989698805746787e-03,3.328350814870313038e-03,5.064522763420175287e-03,4.279040870552436142e-03,3.301293219296043413e-03,4.510432110952588246e-03,5.086058753331568205e-03,4.616797276325930628e-03,4.992062862149935880e-03,3.795785069074858985e-03,2.847335417364839187e-03,3.825286632147210670e-03,9.187299184630516938e-03,4.702130566580337880e-03,2.154081923639708518e-03,4.794475788747958739e-03,1.308373500947002457e-02,3.740793852106250213e-03
4.563089873902198210e-03,3.698136656951233302e-03,5.580712767255690231e-03,4.685044796514505581e-03,3.691000289311937525e-03,5.061749072305680476e-03,5.581128473400761604e-03,5.020678289539204017e-03,5.608299405212476170e-03,4.112740183672113255e-03,3.135547056402714344e-03,4.232133388454519321e-03,1.007938274081057912e-02,5.142988594427083324e-03,2.359850897493935215e-03,5.291499589116757836e-03,1.442981513073606642e-02,4.126617150374075130e-03
4.233079253488222435e-03,3.429572268677020391e-03,5.201183960582634117e-03,4.384982857959412658e-03,3.428921943591476795e-03,4.663825521041545762e-03,5.208280682626760701e-03,4.652072830356355007e-03,5.196356179840076923e-03,3.807794003893105652e-03,2.922879953390736339e-03,3.923911693425461561e-03,9.352487080015160770e-03,4.815088529020412900e-03,2.188854161909735679e-03,4.918000845203720876e-03,1.339029515720328335e-02,3.842932179350835691e-03
5.018398813023945346e-03,4.098671680623462016e-03,6.175658180051601769e-03,5.237731466313167578e-03,4.059449902364497924e-03,5.493950666372676706e-03,6.135141982050259027e-03,5.512998808377303321e-03,6.143022353621389701e-03,4.456614028740587402e-03,3.476316043953285584e-03,4.604894264047694301e-03,1.105308488032731747e-02,5.709255537811516561e-03,2.590043773584999216e-03,5.821526147293040222e-03,1.573699869615532640e-02,4.519518360853568527e-03
3.132467419940661128e-03,2.545321960200405860e-03,3.832573828202544882e-03,3.219085400230973799e-03,2.533236139757844094e-03,3.470792448931643050e-03,3.830019218544809898e-03,3.433095359961642248e-03,3.850057311333613015e-03,2.815480757636485646e-03,2.168510683532243622e-03,2.894682090130531061e-03,6.894608763609650325e-03,3.538159290341114788e-03,1.612202627944366289e-03,3.637956820248035641e-03,9.893755519784832100e-03,2.837906417687549761e-03
4.800994519050426172e-03,3.934758744674650074e-03,5.934009792383837870e-03,4.992194166235072728e-03,3.917566441980549312e-03,5.291603326034871602e-03,5.916095422178331911e-03,5.328262870980130309e-03,5.903321662169932170e-03,4.375161755177821125e-03,3.312165225394205631e-03,4.468951997999968777e-03,1.071433819952720412e-02,5.484077525602872386e-03,2.506901090683472198e-03,5.593659544787319381e-03,1.529675422306276886e-02,4.363816472038692384e-03
5.570229804289797415e-03,4.562799356373183762e-03,6.879016052102292916e-03,5.812839576211367883e-03,4.521082251277935143e-03,6.128983088529497275e-03,6.847093515298881966e-03,6.158292373616840697e-03,6.872845601896844688e-03,5.021595363099932291e-03,3.861107109964561235e-03,5.148812929153878844e-03,1.233859837141527450e-02,6.380375101714370195e-03,2.874992820156773050e-03,6.503565688023313016e-03,1.764629838527919520e-02,5.071022753373630523e-03
4.126395072884211403e-03,3.376574114485871112e-03,5.008231892946810385e-03,4.164872841798445205e-03,3.354037900801269331e-03,4.594882447679036856e-03,5.015972447479648440e-03,4.460282785245711645e-03,5.045844370021141181e-03,3.683634157419656604e-03,2.836139377758035898e-03,3.805476945286162625e-03,9.047762730693695646e-03,4.590932145448584425e-03,2.114960061661486611e-03,4.744093747217716962e-03,1.298309285733738327e-02,3.696034590115754824e-03
4.292941772771790773e-03,3.489453578397746364e-03,5.298089023740347112e-03,4.452896333557184068e-03,3.499856110981013416e-03,4.733934692158318913e-03,5.315000086946645476e-03,4.759246385418459263e-03,5.270072375649033358e-03,3.923826657153102818e-03,2.947664747183619677e-03,4.016425868318176592e-03,9.588088162520781374e-03,4.903102462350410022e-03,2.243232446416389917e-03,4.993880005294899088e-03,1.370825056190460266e-02,3.910437657171024310e-03
3.755159842787435427e-03,3.039322911280831294e-03,4.632361715056376728e-03,3.931518525350640759e-03,3.038914666833290174e-03,4.102783779656862979e-03,4.597165732308097254e-03,4.085619256400913057e-03,4.626988512097271987e-03,3.288556155369262799e-03,2.608910925580669275e-03,3.444363929093285145e-03,8.212176672858654061e-03,4.289867783183640496e-03,1.930326004601609679e-03,4.367095856347332113e-03,1.173569439100231523e-02,3.396204117660583423e-03
2.398483398617096661e-03,1.909877589598136735e-03,2.961217451414360682e-03,2.513688486462039087e-03,1.951188170305110476e-03,2.611082196851768206e-03,2.954896767272728250e-03,2.599493219433874312e-03,2.970655826532853875e-03,2.104529724470539497e-03,1.649941650584158849e-03,2.220942314669266827e-03,5.261383872354382860e-03,2.748677182532607236e-03,1.242954051709330935e-03,2.785908583290144184e-03,7.545742952671409889e-03,2.185030386654985939e-03

The documentation says:

complete: The callback to execute when parsing is complete. It receives the parse results. If parsing a local file, the File is passed in, too:
complete: function(results, file) {
    console.log("Parsing complete:", results, file);
}
When streaming, parse results are not available in this callback.

However, this log also prints undefined for file in my case.

Any help would be appreciated.

Answer

SimpleOne picture SimpleOne · Jan 11, 2016

If you're parsing a local file then you need to use this format:

// Parse local CSV file
Papa.parse(file, {
    complete: function(results) {
        console.log("Finished:", results.data);
    }
});

It provides the results in the complete callback. I see you tried that but the point you are doing the console.log(data) in the for loop is outside of the callback. So, that will log before the callback has finished.

You could try using javascript promises in this case and resolve each one when the complete function is called. Then, only act on the data when all promises are resolved....I'm not an expert in this area.

Alternatively, if you are not interested in waiting for ALL the files to be parsed then you can call your function inside the complete:

Papa.parse(file[i], {
  complete: function(results) {
      console.log("Finished:", results.data);
      myFunc(results); // Do something with the result. Called after EACH file is parsed.
  }
});

If you are needing to do something once ALL files are loaded then take a look at these two:

Using arrays

Using promises