勉強したことのメモ

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

  関連記事

JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方

あるサイトのソースコードを拝見しているとAXIOSというJSファイルをCDN呼び ...

formのpasswordとtextをjQueryで切り替える方法

formでtype="password"を指定していると内容を入力した際に「●● ...

Flashを用いずJavaScriptでコピー&カット機能を実装する方法

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...

jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法

jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...

JavaScriptでリファラをチェックし、ホスト名と一致するかどうかで分岐処理する方法

ページアクセス時にリファラがホスト名と一致していれば何らかの処理を、一致しない場 ...