バニラ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に指定したりする必要がありそう。
関連記事
-
-
フォームで画像をとりあつかう際にBase64エンコードした上で送信する方法
PHP等サーバサイド系の言語は利用不可(JSは利用可)な環境でformを作成し画 ...
-
-
Ajaxでプラグイン無しのファイルアップロード方法
画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...
-
-
Leafletで表示したマップにジェスチャーハンドリングを追加する方法(Leaflet.GestureHandling)
GoogleMapをズームする際にPCだと「Ctrl+スクロール」、スマホだと「 ...
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
JavaScriptのライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法
JavaScriptにてCookie等にデータを保存する際に暗号化したものを保存 ...
