勉強したことのメモ

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

  関連記事

jQueryで対象の要素をまとめて親要素で囲む方法

あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ...

バニラJavaScriptにて「ipify API」を利用してユーザのIPアドレスを取得する方法

あるサイトでユーザのIPアドレスを取得したいというケースがあった。普段であればP ...

JavaScriptで文字列から数値(特に小数)へ変換時の注意点

JavaScriptで文字列から数値へ変換時に想定していた結果と異なることがあっ ...

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

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

Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法

Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...