Как мне прочитать CSV-файл в массиве в Javascript?

Это мой первый раз с JavaScript, и я застрял на проблеме. Я должен читать из CSV-файла, который содержит имена 1 миллион лучших веб-сайтов на основе трафика Alexa. Размер CSV-файла составляет 22,5 МБ. Основываясь на некоторых уроках в сети, я пытаюсь сделать так:

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

Но я не получаю вывод на консоль, кроме []. Что не так с этим? Также это правильный способ сделать это. В основном мне нужно прочитать файл один раз в массиве, а затем использовать этот массив для дальнейшей обработки.

Источник

1 ответ

Здесь есть аналогичный вопрос, вы, должно быть, пропустили его.

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. Three.js библиотека дросселей в IE 8. Жалуется
о синтаксических ошибках (??). Вы получите Uncaught exception: DOMException: NETWORK_ERR
с оперой.

Кроме того, вы получите 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"
}]

Есть альтернативный способ чтения файлов локально, через File API HTML5

Источник
Другие вопросы по тегам