勉強したことのメモ

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で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"を指定していると内容を入力した際に「●● ...