阅读CSV时,PapaParse返回undefined

时间:2015-01-02 11:24:37

标签: javascript jquery papaparse

我的目标是打开一个CSV文件,然后使用PapaParse将其内容解析为<div>。到目前为止它似乎工作,但它不是实际值,它只是返回undefined。我不知道出了什么问题,可能是一个奇怪的CSV文件(我是从带有另存为的excel表中创建的),或者它可能只是草率的编码。

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>

编辑:这是我正在测试的文件(http://www.topdeckandwreck.com/excel%20graphs/)。不知道这是否真的相关,因为这样做的目的是让用户能够打开任何CSV文件然后从中制作图表:)

3 个答案:

答案 0 :(得分:12)

你很可能有时间问题。

Papa是一个异步库,一个明显的标志是提供complete回调的事实。

这意味着你不能使用全局变量将结果从A转移到B.事实上,你应该避免使用全局变量。

在结果准备好之后,您想要完成的所有工作必须在回调函数中完成。 这适用于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);
});

答案 1 :(得分:0)

我认为您希望在实际完成时看到结果:

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>");
        }
    });
}

答案 2 :(得分:0)

好的,所以我解决了这个问题,解决方法就是这个(var需要包含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);
});

}

感谢其他人的帮助