在 javascript 中将 .csv 文件读取到 object/array

Question

我正在尝试做一些我认为相当简单但似乎不起作用的事情。我在与脚本文件相同的目录中有一个 .csv 文件。我想使用 .csv 文件中的数据创建对象或数组。如何使用 javascript 访问本地文件？

抱歉缺少代码，但我什至不知道该走哪条路；我试过 .get 和 ajax 和 this plugin 但我只是不知道我在做什么。有人能给我一个清楚的例子，说明如何加载文件并在 div 中打印它吗？

Answer 1

PapaParse() 在这里做得很好，例如，这将为您完成工作：

Papa.parse(file, {
    complete: function(results) {
        console.log("Finished:", results.data);
    }
});

DEMO

Answer 2

为了模拟静态文件服务器，您可以在命令行上使用 python 运行一个 http 服务器。这是使用 ajax 请求所必需的。

python -m SimpleHTTPServer

或者如果你有 python 3

python -m http.server

现在将该文件上传到网页有两个部分。 1) 发出 ajax 请求，2) 解析 csv。有许多不同的库可以实现 ajax 请求，但在这种情况下，您可能会发现结合了两者的最简单的开箱即用解决方案是 d3.js.

d3.csv("filename.csv", function(err, data) {

    // csv is parsed into an array of objects, as data

});

当然，这只有在您从本地主机加载页面时才有效。

编辑：

确保运行您的 http 服务器位于 index.html 文件的位置。那么你在d3.csv函数中的请求是相对于index的。最后，数据仅在回调内部可用，任何错误消息（或 null）都将放入 err 参数中。

Project
|
+-- index.html
|    
+-- data
|  |  
|  \-- dataset.csv

那么 index.html 中的代码看起来像

d3.csv("data/dataset.csv", function(err, data) {

    if (err) console.log(err) // error messages

    console.log(data);   // should contain the parsed csv
});

在 javascript 中将 .csv 文件读取到 object/array

Read .csv file to object/array in javascript

javascript

csv

jquery

jquery-csv