【jquery】csvファイルを読み込んでhtmlのリストを書き出す(jquery.csv.js)

【jquery】csvファイルを読み込んでhtmlのリストを書き出す(jquery.csv.js)

楽天などのECサイトの運営をしているのですが、イベントページで商品リストをhtmlで書き出すことがよくあります。
htmlを知らない人でもcsv(Excel)が使えれば更新できるように仕様を変更したのでそのまとめメモ。

スポンサーリンク
スポンサードリンク
最近の投稿

jQueryでcsv→html関連記事

csvを配列で扱えるjquery.csv.jsを用意する!

jQueryのプラグインを使ってExcelのCSVを読み込む実験のjquery.csv.jsをお借りしました!
このプラグインはExcelで作ったcsvファイルを配列で処理できる優れものです!リンク先の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>

readcsv.jsを用意する

次に実際の処理をするjs、「readcsv.js」を用意します。今回は以下のようなcsvを用意したとします。

セル番号 0 1 2
項目名 URL 性別 リンク文字

セル番号がthis[?]の数字です。0から始まることに注意!下のコードをコピーし「readcsv.js」で保存します。

js

$(window).load(function () {
    $.get('./itemlist.csv',function(data){
        var csv = $.csv()(data);
        var itemlist = '';

        //indexを使ってくり返し回数をカウントします
        $(csv).each(function(index){
            if(this[0] && this[1] == 1){
                itemlist += '
<li><a href="' + this[0] + '">' + this[2] + '</a></li>

';
            }
		})
		$("#itemlist").append(itemlist);
    })
})

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>
<script type="text/javascript" src="readcsv.js"></script>

<ul id="itemlist"></ul>

csvを用意する

エクセルで作ったcsvを「itemlist.csv」で保存します。文字コードは「UTF-8」で保存します。今回は以下の内容です。

csv

URL,性別,リンク文字
http://mugen00.moo.jp/web/,1,メンズシューズ
http://mugen00.moo.jp/web/,2,レディース財布
http://mugen00.moo.jp/web/,1,メンズバッグ

これで完成です!
DEMO
デモの場合、this[1]が1なら処理する流れなので合計で2個処理しています。
jquery.csv.jsがitemlist.csvを分解してreadcsv.jsで処理する感じになります。
【jquery】常に最新のjsを読み込む方法(getScript)のように最新のcsvファイルを読み込むようにしておくと便利ですよ!

スポンサーリンク
スポンサードリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク
スポンサードリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA