BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] javascript でローカルの csv ファイルを読み込む？[クローズド]です。

2022-02-18 22:48:11

質問

[EDIT】をご覧ください。］ を使用して問題を解決しました。 D3 ということで、「nevermind thanks!

私はこのようなcsvファイルを持っていて、クライアント側のjavascriptにローカルのcsvファイルをインポートする必要があります。 

    "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を使えばいいのでしょうか？ファイルリーダー？どれを使うのが一番いいのでしょうか？また、どのようにコードでこれを実装しますか？

しかし、ええ、私は非常にjavascriptの初心者なので、ちょうど混乱しています、だから、正しい方向に任意のヘルプは素晴らしいです。ありがとうございます!

どのように解決するのですか？

以下は readAsBinaryString() から ファイルリーダー ローカルファイルを読み込むための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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します