Чтение в локальном csv-файле в javascript? [закрытый]

[EDIT] я решил проблему с помощью D3, по фигу, спасибо!

Итак, у меня есть csv-файл, который выглядит примерно так, и мне нужно импортировать локальный csv-файл в мой клиентский javascript: 

    "L.Name", "F.Name", "Gender", "School Type", "Subjects"
    "Doe",    "John",  "M",      "University",  "Chem I, statistics, English, Anatomy"
    "Tan",    "Betty",   "F",     "High School", "Algebra I, chem I, English 101"
    "Han",    "Anna",    "F",     "University",  "PHY 3, Calc 2, anatomy I, spanish 101"
    "Hawk",   "Alan",    "M",     "University",  "English 101, chem I"

мне в конце концов нужно разобрать его и вывести что-то вроде:

Chem I: 3         (number of people taking each subject)
Spanish 101: 1 
Philosophy 204: 0

но сейчас я застрял на том, чтобы просто импортировать его в javascript.

мой текущий код выглядит так: 

<!DOCTYPE html>  
<html>  
<body>
<h1>Title!</h1>
<p>Please enter the subject(s) that you wish to search for:</p>
<input id="numb" type="text"/> 
<button onclick="myFunction()">Click me to see! :) </button>
<script>
function myFunction() {
    var splitResearchArea = []; 
    var textInput = document.getElementById('numb').value; 
    var splitTextInput = textInput.split(",");

  for(var i =0; i<splitTextInput.length; i++) {
    var spltResearchArea = splitTextInput[i];
    splitResearchArea.push(spltResearchArea);
  }
}

Я исследовал и нашел некоторые полезные ссылки на Stackoverflow, такие как этой, этой и этой но я новичок в JavaScript и я не совсем понимаю. Должен ли я использовать Ajax? FileReader? в jQuery? Каковы преимущества использования одного над другим? И как бы вы реализовали это в коде?

Но да, я просто запутался, так как я очень новичок в javascript, поэтому любая помощь в правильном направлении была бы отличной. Спасибо!!

7
ajax csv filereader javascript jquery

3 ответов

вот как использовать readAsBinaryString() С FileReader API для загрузки локального файла.

<p>Select local CSV File:</p>
<input id="csv" type="file">

<output id="out">
    file contents will appear here
</output>

в основном, просто нужно слушать, чтобы изменить событие в <input type="file"> и вызовите функцию readFile.

var fileInput = document.getElementById("csv"),

    readFile = function () {
        var reader = new FileReader();
        reader.onload = function () {
            document.getElementById('out').innerHTML = reader.result;
        };
        // start reading the file. When it is done, calls the onload event defined above.
        reader.readAsBinaryString(fileInput.files[0]);
    };

fileInput.addEventListener('change', readFile);

jsFiddle

22

Я использую эту библиотеку из google:https://github.com/evanplaice/jquery-csv/ Во - первых- у 

$.get(ur_csv_file_path);

а затем используйте руководство со страницы

2

есть столько способов достижения того, что вы хотите, как вы могли бы себе представить.

если бы я это делал, я мог бы начать с разделения входного текста на строки следующим образом:

var lines = inputText.split('\n');

затем я бы извлек имена заголовков из первой строки. Вам нужна функция для чтения значений из каждой строки.

// This assumes no commas in the values names.
function getCsvValuesFromLine(line) {
    var values = lines[0].split(',');
    value = values.map(function(value){
        return value.replace(/\"/g, '');
    });
    return values;
}

var headers = getCsvValuesFromLine(lines[0]);

затем я бы перебрал оставшиеся строки и создал массив объектов, представляющих значения в русло.

lines.shift(); // remove header line from array
var people = lines.map(function(line) {
    var person = {},
        lineValues = getCsvValuesFromLine(line);
    for(var i = 0; i < lines.length; i += 1) {
        person[headers[i]] = lineValues[i];
    }
    return person;
});

если все это работает, вы должны получить массив объектов, представляющих значения в каждой строке вашего CSV.

выше приведен примерный план того, как может выглядеть код. Я не тестировал его, и он, конечно, не готов к производству, но я надеюсь, что он даст вам представление о том, как делать то, что вы хотите.

я использовал несколько встроенных функций Javascript. Я предлагаю посмотреть их на MDN, если вы не знакомы с ними-то хорошо знать.

наконец, в Javascript есть странная причуда с автоматической вставкой с запятой (плохая особенность языка, IMO). Чтобы избежать проблем, не ставьте новую строку перед открывающей скобкой.

всегда пишу

XXXX {
    ....
}

и не пишите

XXXX
{
    ....
}
1