web-dev-qa-db-ja.com

JavaScriptでローカルのCSVファイルの読み込み？

[編集]Dを使用して問題を解決しました。

したがって、次のような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);
  }
}

this 、 this 、および this のようなStackoverflowの役立つリンクを調査し、見つけましたが、私はjavascriptが初めてなので、完全に理解している。 Ajaxを使用する必要がありますか？ FileReader？ jQuery？一方を他方より使用する利点は何ですか？そして、これをコードにどのように実装しますか？

しかし、はい、私はjavascriptを初めて使用するので混乱しているだけなので、正しい方向への助けがあれば素晴らしいと思います。ありがとうございました！！

javascriptjqueryajaxcsvfilereader
12
ocean800

FileReader APIのreadAsBinaryString()を使用してローカルファイルをロードする方法を次に示します。

<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

34
Jose Rui Santos

私はグーグルからこのライブラリを使用します： https://github.com/evanplaice/jquery-csv/ 最初に-する必要があります

$.get(ur_csv_file_path);

次に、ページからガイドを使用します

2
Legendary

あなたが望むことを達成する方法は、想像できる限り多くあります。

これを行っている場合、入力テキストを次のような行に分割することから始めます。

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
Daniel Allen Langdon