見出し画像

javascriptでcsvファイルを読み込むには

e

個人的案件で調べる必要があったので記録として残す。
大きく分けてCSVファイルの取得と、CSVファイルのデータ読込に分かれる。

① CSVの取得

function getCSV() {
   var request = new XMLHttpRequest();
   request.open("GET", "./hoge.csv", true);
   request.send(null);

   request.onload = function () {
       splitCSV(request.responseText)
   }
}

注意点としてはサーバにリクエストするのでローカルサーバを立てないと反応がないことがデバックしていて分かった。

pythonではローカルサーバを手軽に立ち上げることが出来るので、コマンドプロンプトから任意のディレクトリを指定して下記のコマンドを実行する。HTMLファイルやJavascriptファイルはそこに置くとよい。

python -m http.server 8000

ブラウザのURL欄に「http://localhost:8000/」と打ち込めば挙動を確認することが出来る。alertメソッドを使って結果を確認するとよいだろう

② CSVの読取

function splitCSV(str) {
   var result = [];
   var tmp = str.split("\n");

   for (var i = 0; i < tmp.length; ++i) {
       result[i] = tmp[i].split(',');
   }

   alert(result[0][1]);
}

ソースコードではsplitを2回しているが、読み込むCSVファイルは下記の様な形である。1回目のsplit("\n")で行に分解して配列tmpに1行毎に格納している。2回目のsplit(',')でカンマ区切りされている内容を分解して配列resultに格納している。最終的には2次元配列に落とし込んでいる。配列の1個目の添え字でレコード番号として扱い、2個目の添え字でカラム番号と扱うことでテーブルの様に扱っている

画像1

※ 実際にはtimeやvalueのヘッダ用の文字は入っていない。

その他

javascriptを実行できるようにHTMLのソースコードも残しておく

<!doctype html>
<html lang="ja">

<head>
   <meta charset="utf-8">
   <title>hoge</title>
</head>

<body>
   <script src="./hoge.js"></script>
</body>

</html>

参考情報

XMLHttpRequest

split()

http.server

JavaScriptでCSVファイルを読み込む方法

おわり！