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

标签 javascript jquery arrays csv jquery-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>

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

最佳答案

有一个与此类似的问题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 文件
这不是一个明智的决定,最好在服务器上完成。

这是打开文件并处理内容的一种方法。
注意:它仅适用于 FirefoxThree.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/

相关文章:

javascript - 不确定如何处理我的 javascript 依赖项

javascript - 如何在高阶函数中绑定(bind)函数引用?组合优于继承

jquery - 使用后退按钮时的 dateFormat 日期选择器

java - 有没有办法缩短java中的for-each循环?

javascript - 我想创建一个页面,该页面的按钮应放置在随机位置

javascript - 未捕获的语法错误 : Unexpected token < (from &lt;! DOCTYPE html>)

javascript - 当通过 jQuery 创建 DOM 元素时,Onclick 在 IE 中不会触发

javascript - 避免在元素上绑定(bind)多个事件

php - 如何从数组中选择一系列索引?

javascript - 删除数组上的对象的最佳方法是什么