My goal is to open a CSV file, then parse its contents onto a <div> using PapaParse. So far it seems to be working but instead of actual values it just returns undefined. I have no idea what's wrong, could be a strange CSV file (I made this from an excel table with Save As), or it could just be sloppy coding.

JS

var data;

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

    Papa.parse(file, {
        header: true,
        dynamicTyping: true,
        complete: function (results) {
            data = results;
        }
    });
    $(".graphcontainer").append("<div class='parse'>" + data + "</div>");
}

$(document).ready(function () {
    $("#csv-file").change(handleFileSelect);
});

HTML

<div class="graphcontainer">Parser Output:</div>
<div class="buttoncontainer">
    <input type="file" id="csv-file" name="files"/>
</div>

edit: here are the files I've been testing with (/). Don't know if this is really relevant as the goal of this is for the user to be able to open any CSV file and then making a graph out of it :)

My goal is to open a CSV file, then parse its contents onto a <div> using PapaParse. So far it seems to be working but instead of actual values it just returns undefined. I have no idea what's wrong, could be a strange CSV file (I made this from an excel table with Save As), or it could just be sloppy coding.

JS

var data;

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

    Papa.parse(file, {
        header: true,
        dynamicTyping: true,
        complete: function (results) {
            data = results;
        }
    });
    $(".graphcontainer").append("<div class='parse'>" + data + "</div>");
}

$(document).ready(function () {
    $("#csv-file").change(handleFileSelect);
});

HTML

<div class="graphcontainer">Parser Output:</div>
<div class="buttoncontainer">
    <input type="file" id="csv-file" name="files"/>
</div>

edit: here are the files I've been testing with (http://www.topdeckandwreck.com/excel%20graphs/). Don't know if this is really relevant as the goal of this is for the user to be able to open any CSV file and then making a graph out of it :)

• javascript
• jquery
• papaparse

• after trying it out with different CSV files it just returns [Object object] – Miha Šušteršič Commented Jan 2, 2015 at 14:23
• You might want to add the CSV files you are using to your question. – Tomalak Commented Jan 2, 2015 at 14:27

4 Answers 4

You very likely have a timing problem.

Papa is an asynchronous library, a telltale sign is the fact that is offers a complete callback.

That means you can't use a global variable to transfer its results from A to B. In fact, you should avoid global variables in general.

All work you want to be done after the result is ready must be done in the callback function. This applies to any asynchronous process in JavaScript.

function handleFileSelect(evt) {
    if ( !(evt.target && evt.target.files && evt.target.files[0]) ) {
        return;
    }    
    Papa.parse(evt.target.files[0], {
        header: true,
        dynamicTyping: true,
        complete: function (results) {
            debugDataset(results);
            renderDataset(results);
        }
    });
}

function debugDataset(dataset) {
    var formatted = JSON.stringify(dataset, null, 2);
    $("<div class='parse'></div>").text(formatted).appendTo(".graphcontainer");
}

function renderDataset(dataset) {
    // render code here...
}

$(function () {
    $("#csv-file").change(handleFileSelect);
});

I think you want to see the results when it's actually completed:

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

    Papa.parse(file, {
        header: true,
        dynamicTyping: true,
        complete: function (results) {
            var data = results;
            $(".graphcontainer").append("<div class='parse'>" + data + "</div>");
        }
    });
}

You can also use a promise to retreive the result.

async getData() {
    return await new Promise((resolve, reject) => {
        try {
            Papa.parse(
                `${ window.location.protocol }//${ window.location.host }/data/myfile.csv`, 
                {
                    download: true,
                    worker: true,
                    header: true,
                    complete: function(r) {
                        resolve(r.data);
                    }
                }
            )
        }
        catch (e) {
            reject(e);
        }
    });
}

ok so I solved the problem, the solution is this (var needs to contain results.data)

{

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

    Papa.parse(file, {
        complete: function (results) {
            var data = results.data;
            $(".graphcontainer").append("<div class='parse'>" + data + "</div>");
        }
    });
}

$(function () {
    $("#csv-file").change(handleFileSelect);
});

}

thanks for the help from the others