バニラ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に指定したりする必要がありそう。
関連記事
-
-
formでdisplay:none;にしてても送信される
formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
-
-
JavaScriptにてページ内のスクロール可能な要素を最後までスクロールしないとボタンをクリックできないようにする方法
お問い合わせページ等で「個人情報の取扱いについて」のような長い文章があり、その部 ...
-
-
JavaScriptで全角半角を判別の上で文字数カウントを行う
やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...
-
-
CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法
CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...
