在javascript中将.csv文件读取到对象/数组答案

【问题标题】：Read .csv file to object/array in javascript在javascript中将.csv文件读取到对象/数组
【发布时间】：2015-11-01 22:31:24
【问题描述】：

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

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

【问题讨论】：

服务器或客户端机器上的相同目录？如果你想打开客户端文件，你需要使用 fileReader api (developer.mozilla.org/en-US/docs/Web/API/FileReader)。如果你在服务器端做，这取决于你在运行什么。
它将在服务器上。也就是说，在我的测试过程中，我的文件结构只是在我的桌面上 - 我没有将它作为服务器运行。
嗯，必须是其中之一。使用文件 (file://) 或 HTTP (http://) 协议获取文件的 API 有所不同。

标签： javascript jquery csv jquery-csv

【解决方案1】：

为了模拟一个静态文件服务器，你可以在命令行使用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

});

当然，这仅在您从 localhost 加载页面时才有效。

编辑：

确保从 index.html 文件的位置运行 http 服务器。那么您在d3.csv 函数中提出的请求是相对于索引的。最后，数据只在回调内部可用，任何错误消息（或 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
});

【讨论】：

这似乎是一个很好的解决方案！但是，我很难理解如何显示文档中的数据。你能给我指出他正确的方向吗？我一直为空。
谢谢您-您的编辑清除了它！我无法访问数据！
您是否收到错误消息？如果不查看某些代码，我不确定是否可以提供更多帮助
确认，抱歉。错字。我能够访问数据。再次感谢您。
啊，好吧，编码愉快！ :D

【解决方案2】：

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

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

DEMO

【讨论】：