2

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

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

4

1 回答 1

3

这里有一个类似的问题，你一定错过了。

该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。IE 8Three.js中的库阻塞。它抱怨 语法错误（？？）。你会得到一个 with Opera。
Uncaught exception: DOMException: NETWORK_ERR

此外，由于在Firefox 19.0.2syntax error中解析无效（非）XML（即CSV内容），您会得到一个。

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

<!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 的 File API

于 2014-02-15T22:49:23.290 回答