在JavaScript中将.csv文件读入对象/数组

Question

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

抱歉没有代码，但我甚至不知道该走哪条路线；我尝试过.get和ajax以及这个插件，但我真的不知道我在做什么。有人能给我一个清晰的例子来加载文件并在div中打印吗？

- user3175088

---

在服务器上还是客户端机器上使用相同的目录？如果您想打开客户端文件，则需要使用fileReader API（https://developer.mozilla.org/en-US/docs/Web/API/FileReader）。如果您是在服务器端进行操作，则取决于您正在运行什么。 - Jonah Williams

它将在服务器上。话虽如此，在我的测试过程中，我的文件结构只是在我的桌面上 - 我没有将其作为服务器运行。 - user3175088

那必须是其中之一。使用文件（file://）或HTTP（http://）协议获取文件的API是不同的。 - sergeyz

Answer 1

PapaParse()在这里做得非常出色，例如这个函数将为您完成工作：

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

演示

- baao

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

});

当然，这只适用于从本地主机加载页面的情况。

编辑：

确保您从index.html文件所在的位置运行http服务器。然后，您在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
});

- Jonah Williams

---

这似乎是一个不错的解决方案！然而，我很难理解如何从文档中显示数据。你能指点我一下吗？我一直得到 null。 - user3175088

谢谢，你的编辑澄清了它！我无法访问数据！ - user3175088

你是否收到了错误信息？如果没有看到一些代码，我不确定能否提供更多帮助。 - Jonah Williams

抱歉，打错了。我能够访问数据。再次感谢你。 - user3175088

啊，好的，愉快地编程吧！:D - Jonah Williams