外部csvを配列として扱えるjquery.csv.jsで、csvのデータによって条件に振り分け、htmlを構築する方法。
大量の商品データを格納してある外部csvを読み込んで、例えば、メンズ・レディースで処理を分けたりできるので、htmlがつかえない人でもcsv(Excel)が使えれば更新できるようになります。
※2020/07追記
デモの内容がわかりにくいのと、jquery.csv.jsがバージョンアップされていたので、デモも更新しました。
jQueryでcsv→html関連記事
phpで文字列が数字かどうかを判別するctype_digit
指定時間に自動タイマーで切り替わる！楽天のバナーをcsvで管理する【jQuery】
csvで大量の商品リストを分割して書き出してIEでの処理を早くする方法【jQuery】
【jQuery】IEでajaxで取得したcsvをキャッシュしてしまう問題の対策
jquery.csv.jsで、csvデータをクエリパラメーターで出力htmlを振り分ける
外部csvを配列として扱えるjquery.csv.jsで条件に応じてhtmlを構築する
外部csvを配列で扱える、jquery.csv.jsを用意する
jQueryのプラグインを使ってExcelのCSVを読み込む実験のjquery.csv.jsをお借りしました！
※2020/07追記
この記事を作成時に、お借りしたサイトがリンク切れとなっていました。
現在はGitHubに移動しているようです。
このプラグインはExcelで作ったcsvファイルを配列で処理できる優れものです！リンク先のjquery.csv.jsを保存します。このプラグインを先に読み込まないと動きません。
jquery.csv.jsを読み込む
html
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> <script type="text/javascript" src="jquery.csv.js"></script>
まずはjQueryを読み込んでください。
次に、jquery.csv.jsも読み込んでください。
外部csvを用意する
今回は以下のような構造のcsvを用意します。
| セル番号 | 0 | 1 | 2 |
| 項目名 | URL | 性別 | リンク文字 |
デモのデータはこちら。
csv
URL,性別,リンク文字 https://mugenweb-note.com/web/,1,メンズシューズ https://mugenweb-note.com/web/,2,レディース財布 https://mugenweb-note.com/web/,1,メンズバッグ
性別は1→メンズ、2→レディースで定義してます。
エクセルで作ったcsvを「itemlist.csv」で保存します。
文字コードはhtmlと合わせてくださいね。
外部csvを、Excelで変更するならS-JISだと思うので、htmlがUTF-8なら文字コードの変更が必要です。
readcsv.jsを用意する
次に実際の処理をするjs、「readcsv.js」を用意します。
上の表のセル番号がthis[?]の数字です。0から始まることに注意！
下のコードをコピーし「readcsv.js」で保存します。
※2020/07追記
jquery.csv.jsがバージョンアップされていたので、readcsv.jsを変更してあります。
JavaScript
$(window).load(function () {
function readCsv(data) {
var target = '#itemlist';
var csv = $.csv.toArrays(data);
var itemlist = '';
$(csv).each(function () {
if (this[0].length > 0) {
if (this[1] == '1') {
var gender = "メンズ";
} else if (this[1] == '2') {
var gender = "レディース";
} else {
var gender = this[1];
}
itemlist += '<tr><td>' + this[0] + '</td><td>' + gender + '</td><td>' + this[2] + '</td></tr>';
}
});
$(target).append(itemlist);
}
var csvfile = './itemlist.csv';
$(function () {
$.get(csvfile, readCsv, 'text');
});
})
html
<script type="text/javascript" src="https://code.jquery.com/jquery-1.6.min.js"></script> <script type="text/javascript" src="jquery.csv.js"></script> <script type="text/javascript" src="readcsv.js"></script> <ul id="itemlist"></ul>
これで完成です！
jquery.csv.jsがitemlist.csvを分解してreadcsv.jsで処理する感じになります。
【jquery】常に最新のjsを読み込む方法(getScript)のように最新のcsvファイルを読み込むようにしておくと便利ですよ！
コメント