Question

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

很抱歉缺少代码，但我甚至不知道要走哪条路线;我试过.get和ajax和this plugin但我只是不知道自己在做什么。有人能给我一个明确的例子，说明如何加载文件并将其打印在div中吗？

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

Answer 2

PapaParse()在这方面表现非常出色，例如，这将为您完成工作：

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

DEMO

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

2 个答案: