这是我第一次使用 javascript,我遇到了一个问题。我必须读取 csv 文件,其中包含基于 Alexa 流量的前 100 万个网站的名称。 csv 文件的大小为 22.5 MB。根据网上的一些教程,我尝试这样做:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - interactive cubes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="./three.min.js"></script>
<script src="./jquery-2.1.0.min.js"></script>
<script src="./stats.min.js"></script>
<script src="./jquery.csv-0.71.js"></script>
<script>
var data = $.csv.toObjects('top_1m.csv');
console.log(data);
</script>
</body>
</html>
但是除了 [] 之外,我在控制台上没有得到任何输出。这有什么问题吗?这也是正确的做法。基本上我需要在数组中读取一次文件,然后使用该数组进行进一步处理。
最佳答案
有一个与此类似的问题here , 你 一定是错过了。
CSV
库解析 CSV
字符串而不是文件。它给你一个空数组的原因
是因为它不是完整的 CSV
,即至少 1 个 header + 1 个项目。
这是源代码中的文档。
LINE 673
/**
* $.csv.toObjects(csv)
* Converts a CSV string to a javascript object.
* @param {String} csv The string containing the raw CSV data.
* @param {Object} [options] An object containing user-defined options.
...
**/
正如评论中所指出的,处理与浏览器中的文件一样大的 CSV
文件
这不是一个明智的决定,最好在服务器上完成。
这是打开文件并处理内容的一种方法。
注意:它仅适用于 Firefox。 Three.js
库在 IE 8 中被阻塞。它提示
关于语法错误(??)。您将收到未捕获的异常:DOMException:NETWORK_ERR
与歌剧。
此外,由于解析无效(非)XML
(即 CSV
内容),您会收到语法错误
在 Firefox 19.0.2 中。
这不是最优雅的解决方案。它确实有效。
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Testing CSV with jQuery csv.0.71</title>
<meta charset = "utf-8">
<script src = "./three.min.js"></script>
<script src = "./jquery-2.1.0.min.js"></script>
<script src = "./stats.min.js"></script>
<script src = "./jquery.csv-0.71.js"></script>
<script>
function openCSVFile(CSVfileName){
// create the object
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
processCSVContents(httpRequest);
}
// Send the request
httpRequest.open("POST", CSVfileName, true);
httpRequest.send(null);
}
function processCSVContents(httpRequest){
console.log("--> here");
if (httpRequest.readyState == 4){
// everything is good, the response is received
if ((httpRequest.status == 200)
|| (httpRequest.status == 0)){
// Analys the contents using the stats library
// and display the results
CSVContents = httpRequest.responseText;
console.log($.csv.toObjects(CSVContents));
console.log(" => Response status: " + httpRequest.status)
console.log(CSVContents);
} else {
alert(' => There was a problem with the request. '
+ httpRequest.status + httpRequest.responseText);
}
}
}
</script>
</head>
<body>
<button type="button" onclick="openCSVFile('pets.csv');">Click Me!</button>
</body>
</html>
CSV
文件 pets.csv 包含以下内容:
name,age,weight,species
"fluffy",3,14,"cat"
"vesuvius",6,23,"fish"
"rex",5,34,"dog"
输出:
[{
name: "fluffy",
age: "3",
weight: "14",
species: "cat"
}, {
name: "vesuvius",
age: "6",
weight: "23",
species: "fish"
}, {
name: "rex",
age: "5",
weight: "34",
species: "dog"
}]
还有另一种本地读取文件的方法,通过 HTML5's File API
关于javascript - 如何在 Javascript 中读取数组中的 csv 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21798139/