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を用意した。
id | name | age |
1 | 鈴木 | 20 |
3 | 佐藤 | 30 |
5 | 山田 | 40 |
対応方法
ソースコード
$(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を使っていい案件の場合はこちらの方が楽で良さそう。
関連記事
-
jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法
jQueryで指定した要素のposition(leftやtop) / width ...
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...
-
jQuery.uploadでリアルタイムプレビュー
やりたい事は、 ・<input type="file">で画像を選択 ...
-
テキストエリアを選択すると中身を全選択状態にする方法
テキストエリアやテキストボックスの中に文字が書いてあり、ドラッグをしなくても、そ ...
-
ajaxのエラー詳細を取得する
success or errorで分岐処理はできるけど、 エラー詳細取れないの? ...