バニラ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に指定したりする必要がありそう。
関連記事
-
-
JavaScriptでdownload属性が付与されている画像を一括ダウンロードさせる方法
ページ内にdownload属性が付与されている画像が複数あり、何らかのボタンをク ...
-
-
バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法
画像スライダーを設置する場合「slick」プラグインを利用することが多い。ただ、 ...
-
-
JavaScriptでURLのクエリを取得する
やりたかった事はJavaScriptでGETのクエリを取得。 ■ソース var ...
-
-
jQueryで後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動
jQueryで後から追加した要素にhasClass / addClass / r ...
-
-
formのpasswordとtextをjQueryで切り替える方法
formでtype="password"を指定していると内容を入力した際に「●● ...