バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う方法
サーバ内のCSVファイルを読み込み、そのデータをサイト上で取り扱いたい。通常だとPHPで対応するところだがASPを利用したサイトのためPHPは使えないという制限があった。何とかならないか調べたところバニラJavaScriptで対応できそう。以下に対応方法をメモ。
CSVの内容
以下内容のCSVを用意した。
id | name | age |
1 | 鈴木 | 20 |
3 | 佐藤 | 30 |
5 | 山田 | 40 |
対応方法
ソースコード
const file = `test.csv`; const request = new XMLHttpRequest(); request.open(`GET`, file, false); request.send(null); const csv = []; const record = request.responseText.split(/\r\n|\n/); for( let i = 0; i < record.length; ++i ){ let column = record[i].split(`,`); if( column.length != 1 ){ csv.push(column); } } console.table(csv);
実行結果
ソースコードを実行すると開発者ツールで以下のように結果が返ってくる筈。
所感
実運用の際は1行目のカラム名のデータは削除したり、配列ではなくオブジェクトに入れてキーをCSVのidに指定したりする必要がありそう。
関連記事
-
table内のiframeのheightを最大高さにする
tableのtdの中にリンクがあり、クリックすると td内でiframeが開く。 ...
-
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
Leafletにて操作内容を履歴に残し「進む」「戻る」ボタンで履歴を実行できる「Leaflet.NavBar」の利用方法
Leafletにてマップ移動やズーム等、ユーザーの操作内容を履歴に残して、「進む ...
-
jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法
先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...
-
javascriptでゼロパティング
月日をゼロパディングしたかったけど PHPとは違い、そういった関数は無かったので ...