勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う方法

  JavaScript

サーバ内の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

  関連記事

CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法

CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...

JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法

大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー の実装方法

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

JavaScriptでオブジェクトのキーに変数を指定する方法

JavaScriptでオブジェクトのkey及びvalueに変数を指定したかった。 ...

HTMLのカスタムデータ属性をjQueryで取得する際はキャッシュに注意する

ASPを使用したサイトでHTMLのカスタムデータ属性を取得し色々処理したかったん ...