バニラ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に指定したりする必要がありそう。
関連記事
-
-
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
-
JavaScriptでdownload属性が付与されている画像を一括ダウンロードさせる方法
ページ内にdownload属性が付与されている画像が複数あり、何らかのボタンをク ...
-
-
jQuery UIでカレンダーピッカー(Datepicker)の利用方法
フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...
-
-
CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法
CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...
-
-
jQueryにて特定のIDが存在するかチェックし分岐処理する方法
jQueryにて特定のIDが存在するかチェックし分岐処理したいというケースがあっ ...