jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う方法をメモしたが、jQueryだと「jquery-csv」というプラグインを導入することで更に簡単に対応できる模様。また配列だけではなくオブジェクトへの変換も可能だった。以下に対応方法をメモ。

jquery-csv

GitHub

https://github.com/evanplaice/jquery-csv

CDN

CDNで使う場合は以下を記述する。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-csv@1.0.21/src/jquery.csv.min.js"></script>

CSVの内容

以下内容のCSVを用意した。

対応方法

ソースコード

$(function(){
    $.ajax({
        url: 'test.csv',
    }).done(function(data, textStatus, jqXHR){
        const csv_array = $.csv.toArrays(data);
        const csv_obj = $.csv.toObjects(data);
        console.log(csv_array);
        console.log(csv_obj);
    }).fail(function(jqXHR, textStatus, errorThrown){
        //エラー処理
    });
});

実行結果

ソースコードを実行すると以下結果が返ってくる筈。

Array(4) [ (3) […], (3) […], (3) […], (3) […] ]
0: Array(3) [ "id", "name", "age" ]
​1: Array(3) [ "1", "鈴木", "20" ]
2: Array(3) [ "3", "佐藤", "30" ]
3: Array(3) [ "5", "山田", "40" ]

Array(3) [ {…}, {…}, {…} ]
​0: Object { id: "1", name: "鈴木", age: "20" }
1: Object { id: "3", name: "佐藤", age: "30" }
2: Object { id: "5", name: "山田", age: "40" }

所感

jQueryを使っていい案件の場合はこちらの方が楽で良さそう。