javascript - Properly parsing local file with PapaParse - Stack Overflow

admin管理员组

文章数量:1315247

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/ma-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
    plaints_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:

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

I also tried this:

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

    var data;
    for (i = 0; i < files.length; i++)
    {
        Papa.parse(files[i], {delimiter:',', dynamicTyping:true, skipEmptyLines:true, 
                              plete: 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 plete 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:

plete: The callback to execute when parsing is plete. It receives the parse results. If parsing a local file, the File is passed in, too:
plete: function(results, file) {
    console.log("Parsing plete:", 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.

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/ma-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
    plaints_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:

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

I also tried this:

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

    var data;
    for (i = 0; i < files.length; i++)
    {
        Papa.parse(files[i], {delimiter:',', dynamicTyping:true, skipEmptyLines:true, 
                              plete: 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 plete 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:

plete: The callback to execute when parsing is plete. It receives the parse results. If parsing a local file, the File is passed in, too:
plete: function(results, file) {
    console.log("Parsing plete:", 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.

• javascript
• csv
• asynchronous
• papaparse

Share Improve this question Follow edited Jan 11, 2016 at 0:05 pceccon asked Jan 10, 2016 at 18:33 pcecconpceccon 9,8542929 gold badges9393 silver badges164164 bronze badges 1

• @matt.life, would you be able to help me with that? Thank you. – pceccon Commented Jan 10, 2016 at 21:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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

It provides the results in the plete 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 plete 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 plete:

Papa.parse(file[i], {
  plete: 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

I have no idea why is this, but I just was able to perform this using jQuery:

function parseNoiseInferenceFiles(files)
{
    $("input[type=file]").parse({
        config: {
        plete: function(results, file) {
                        console.log("This file done:", file, results);
                        noiseMap.push(results)
                  }
        },
        plete: function() {
            console.log("All files done!");
            console.log(noiseMap);
        }
    });
}

Maybe there is another way that I'm not aware of.

本文标签： javascriptProperly parsing local file with PapaParseStack Overflow