「大量のデータをリスト化したページを作成しなければならない」…そんな時、便利なのがCSVです。今回は、jQueryで複数のCSVファイルをパラメータごとに読み込む方法を紹介します。
※CSVをjQueryで読み込む方法についてはこちらを参考にしました。
デモはこちら。実際のコードは以下です。
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function() { // URLのパラメータを取得する var $dir = location.href.split("#"); var $dir2 = $dir[$dir.length -1]; // idと同じ名前のCSVを読み込む $.get('./csv/' + $dir2 + '.csv',function(data){ var csv = $.csv()(data); var productlist = ''; //indexを使ってくり返し回数をカウント $(csv).each(function(index){ if(index != 0 && this[0] != "" ){ productlist += '<li><label for="' + this[0] + '">' + this[2] + '</label></li>'; } }); // <ul>内に挿入 $(".listIn").append(productlist); }); }); |
PHPのようなサーバサイドの言語が使用できない案件で大量のデータを扱う際には、とても便利なのでぜひお試しください。