我的目标是打开一个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文件然后从中制作图表:)
答案 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)
{
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);
});
}
感谢其他人的帮助