PapaParse 在读取 CSV 时返回 undefined
PapaParse returns undefined when reading CSV
我的目标是打开一个CSV文件,然后使用PapaParse将其内容解析到<div>
上。到目前为止,它似乎正在工作,但它只是返回未定义的值,而不是实际值。我不知道出了什么问题,可能是一个奇怪的 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文件,然后用它制作图表:)
您很可能有计时问题。
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);
});
我想你想在实际完成时看到结果:
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>");
}
});
}
好的,所以我解决了这个问题,解决方案是这样的(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);
});
}
感谢其他人的帮助
您还可以使用承诺来检索结果。
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);
}
});
}
相关文章:
- RequireJS向模块传递配置总是返回undefined
- JSON数组数据返回Undefined
- JavaScript”;.方法“;返回undefined
- jQuery可以't获取data-*属性值,返回undefined
- Javascript/JSON警报返回Undefined
- Javascript:firstChild对象返回undefined
- 当尝试使用ajax读取文件时,变量返回undefined
- 如何避免JSON.stringify在特殊情况下返回undefined,从而为JSON.parse创建字符串失败
- 使用谷歌地图:一个返回undefined的自定义javascript函数
- Json在nodeJs和AngularJs中返回undefined
- 为什么像 Firefox 和 Chrome 控制台中的 '}{' 这样的结构会返回 'undefined'?
- 使用 HTML 和 JavaScript 从表单访问值时返回 undefined
- 在 CoffeeScript 中,当尝试调用类中的方法 (@_methodName) 时,它会返回 undefined
- 解析承诺'当'返回undefined(Javascript)
- NodeJS:zlib.gunzip(body)错误地返回“undefined”
- window.open在chrome扩展中返回undefined
- jQuery.pr()返回undefined,而.attr()对数据-*的作用与预期一样
- 正在读取嵌套json,jquery返回undefined
- IIFE是否总是返回undefined
- $timeout包装$http.post返回undefined而不是promise