6

我的目标是打开一个 CSV 文件，然后<div>使用 PapaParse 将其内容解析到一个。到目前为止，它似乎正在工作，但它只是返回未定义的而不是实际值。我不知道出了什么问题，可能是一个奇怪的 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 文件，然后从中制作图表:)

4

4 回答 4

15

你很可能有时间问题。

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);
});
于 2015-01-02T14:39:46.323 回答
1

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

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>");
        }
    });
}
于 2015-01-02T14:49:17.420 回答
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);
});

}

感谢其他人的帮助

于 2015-01-02T15:19:29.867 回答
0

您还可以使用 promise 来检索结果。

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);
        }
    });
}
于 2022-02-16T10:13:01.860 回答