Question

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

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

Answer 1

对此here也有类似的问题一定是错过了。

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 。 {strong> IE 8 中的Three.js库窒息。它抱怨道关于语法错误（??）。你会得到一个Uncaught exception: DOMException: NETWORK_ERR 使用 Opera 。

此外，由于解析了无效（非）syntax error（即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中读取数组中的csv文件？

1 个答案: