Считайте файл.csv в объект / массив в JavaScript

Question

Я пытаюсь сделать что-то, что мне кажется довольно простым, но, похоже, не работает. У меня есть файл.csv в той же директории, что и мой файл скрипта. Я хочу создать объект или массив, используя данные из файла.csv. Как я могу получить доступ к локальному файлу, используя JavaScript?

Извините за отсутствие кода, но я даже не знаю, по какому маршруту идти; Я пробовал.get и ajax и этот плагин, но я просто не знаю, что я делаю. Может ли кто-нибудь дать мне четкий пример того, как загрузить файл и распечатать его в div?

Answer 1

Чтобы имитировать статический файловый сервер, вы можете запустить http-сервер, используя python в командной строке. Это необходимо для использования запросов AJAX.

python -m SimpleHTTPServer  

Или если у вас есть питон 3

python -m http.server

Теперь есть две части, чтобы получить этот файл на веб-странице. 1) сделать запрос ajax, 2) разобрать csv. Существует множество различных библиотек, которые реализуют запросы ajax, но в этом случае вы можете найти самое простое из готовых решений, которое объединяет оба, - d3.js.

d3.csv("filename.csv", function(err, data) {

    // csv is parsed into an array of objects, as data

});

Конечно, это будет работать, только если вы загружаете свою страницу с локального хоста.

РЕДАКТИРОВАТЬ:

Убедитесь, что ваш http-сервер запущен из местоположения вашего файла index.html. тогда запрос, который вы делаете в d3.csv Функция относительно индекса. наконец, данные доступны только внутри обратного вызова, и любое сообщение об ошибке (или ноль) будет помещено в аргумент err.

Project
|
+-- index.html
|    
+-- data
|  |  
|  \-- dataset.csv

Тогда код в index.html будет выглядеть

d3.csv("data/dataset.csv", function(err, data) {

    if (err) console.log(err) // error messages

    console.log(data);   // should contain the parsed csv
});

Answer 2

PapaParse() делает отличную работу здесь, например, это сделает работу за вас:

Papa.parse(file, {
    complete: function(results) {
        console.log("Finished:", results.data);
    }
});

DEMO