Javascript 读取CSV时，PapaParse返回未定义

我的目标是打开一个CSV文件，然后使用PapaParse将其内容解析到一个

。到目前为止，它似乎正在工作，但它只返回未定义的值，而不是实际值。我不知道出了什么问题，可能是一个奇怪的CSV文件（我从一个带有“另存为”的excel表中创建了这个文件），也可能只是粗心大意的编码

JS

var数据；
功能手柄文件选择（evt）{
var file=evt.target.files[0]；
parse（文件{
标题：对，
动态打字：对，
完成：功能（结果）{
数据=结果；
}
});
$（“.graphcontainer”）.append（“+data+”）；
}
$（文档）.ready（函数（）{
$（“#csv文件”）.change（handleFileSelect）；
});

HTML

解析器输出：

---

编辑：以下是我一直在测试的文件（）。不知道这是否真的相关，因为这样做的目的是让用户能够打开任何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);
});

功能手柄文件选择（evt）{
if（！（evt.target&&evt.target.files&&evt.target.files[0]））{
返回；
}    
parse（evt.target.files[0]{
标题：对，
动态打字：对，
完成：功能（结果）{
调试数据集（结果）；
渲染数据集（结果）；
}
});
}
函数调试数据集（数据集）{
var formatted=JSON.stringify（数据集，null，2）；
$（“”）.text（格式化）.appendTo（“.graphcontainer”）；
}
函数renderDataset（数据集）{
//在这里呈现代码。。。
}
$（函数（）{
$（“#csv文件”）.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>");
        }
    });
}

功能手柄文件选择（evt）{
var file=evt.target.files[0]；
parse（文件{
标题：对，
动态打字：对，
完成：功能（结果）{
var数据=结果；
$（“.graphcontainer”）.append（“+data+”）；
}
});
}

好的，所以我解决了这个问题，解决方案是（var需要包含results.data）

{

功能手柄文件选择（evt）{
var file=evt.target.files[0]；
parse（文件{
完成：功能（结果）{
var数据=结果数据；
$（“.graphcontainer”）.append（“+data+”）；
}
});
}
$（函数（）{
$（“#csv文件”）.change（handleFileSelect）；
});

}

---

感谢其他人的帮助

在使用不同的CSV文件进行尝试后，它只会返回[Object Object]，您可能希望将您正在使用的CSV文件添加到您的问题中。问题是，我希望能够在另一个库中的函数中使用该变量，该库使用2个值（x，y）生成图形所以我想，如果我只是做一个全局变量，以便更好地处理它。在这里，我只是将其输出到一个div上，以查看发生了什么（出于某种原因，F12在控制台中没有显示任何内容）。结果仍然是一样的，只是它现在在我的所有文件上输出[object object]否，您不能使用全局变量，因为您不知道该全局变量将在何时设置。您必须在回调内完成所有结果处理。提示：当您从该回调调用函数时，从技术上讲，您仍然在回调中。你不必把所有的代码塞进一个函数，你只需要触发它的所有处理。解析器仍然只输出[object object]，而不是实际的数据，不管我使用什么CSV文件（尝试用随机在线生成器生成一些）。@Miha当然，如果结果是一个对象（而且它们是！）然后JavaScript显示

[object object]

，因为这是对象的默认文本表示。如果要显示其他内容（如JSON表示），必须先创建该内容。请看修改后的答案。这正是我的答案所说的…；）哼哼，由于某种原因我没有注意到：-PHint：如果您的代码不是自包含的和可执行的，只需使用“{}（代码示例）”按钮而不是“代码片段”按钮。这样可以防止在答案中创建非功能性的“运行代码片段”按钮。

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

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