如何在Javascript中读取数组中的csv文件



这是我第一次使用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>

但除了[]之外,我在控制台上没有得到任何输出。这是怎么回事?这也是正确的方法。基本上,我需要在数组中读取一次文件,然后使用该数组进行进一步处理。

这里有一个类似的问题,您肯定错过了。

CSV库解析CSV字符串而不是文件。它给您一个空数组
的原因是它不是完整的CSV,即至少1个标题+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。CCD_ 5库在IE 8中阻塞。它抱怨
语法错误(??)。您将获得OperaUncaught exception: DOMException: NETWORK_ERR

此外,由于在Firefox 19.0.2中解析无效(非)XML(即CSV内容)
,您将获得syntax error

这不是最优雅的解决方案。它只是起作用。

<!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的FileAPI

相关内容

  • 没有找到相关文章

最新更新