jquery.csv.jsで、csvデータをクエリパラメーターで出力htmlを振り分ける

jquery.csv.jsで、csvデータを読み込み、クエリパラメーターの値で出力するhtmlを振り分ける

クエリパラメーターとは？
クエリパラメーターを取得する
jquery.csv.jsでcsvファイルを読み込む
性別によって処理を分けるサンプル

jQuery関連記事

クエリパラメーターとは？

xxx/test.html?sex=men&item=bagっていうURLがあるとしたら、?sex=men&item=bagの部分がクエリパラメーター部分です。
この場合は、sexの値がmen、itemの値がbagと複数クエリパラメータが渡されているということです。

複数クエリパラメータを渡す場合は、&で繋げられます。

また、クエリパラメーターを渡せば最新のファイルを取りに行くので、例えばimgタグにつけたら最新の画像を取りに行きます。この場合意味のないクエリパラメーターというイメージです。

今回はクエリパラメーターに意味を持たせて、処理をさせていきます。

クエリパラメーターを取得する

//urlを取得
var url   = location.href;
//取得したurlを?を起点に分けて配列へ
param    = url.split("?");
//分けた?以降を&でも分けて配列へ
param2   = param[1].split("&");
// パラメータ用の配列を用意
var par_Array = [];
// 配列にパラメータを格納
for ( i = 0; i < param2.length; i++ ) {
    neet = param2[i].split("=");
    par_Array.push(neet[0]);
    par_Array[neet[0]] = neet[1];
}

//格納したパラメーターの必要部分を変数に入れる
var t_sex = par_Array["sex"];
var t_item = par_Array["item"];
//確認用
console.log('t_sex:'+t_sex);
console.log('t_item:'+t_item);

クエリパラメーターは複数指定することができます。複数指定する場合は「?sex=men&item=bag」のように&でパラメーター同士をつなげます。
上のコードはクエリパラメーターがいくつあっても対応できるようになってます。つまづきやすいところは
変数のvar t_sex = par_Array[“●●●”]　と　クエリパラメーターの?sex=●●●を同じにしておかないとt_sexに値が入りません。
値が準備できたらあとはif文で条件分岐するだけでページの振り分けができます。

jquery.csv.jsでcsvファイルを読み込む

外部csvを配列として扱えるjquery.csv.jsで条件に応じてhtmlを構築する

外部csvを配列として扱えるjquery.csv.jsで、csvのデータによって条件に振り分け、htmlを構築する方法。大量の商品データを格納してある外部csvを読み込んで、例えば、メンズ・レディースで処理を分けたりできるので、htmlがつ...

性別によって処理を分けるサンプル

上記ページで作成したcsvを利用して、

csvの変更でhtmlのリストを変更できる。
1つのhtmlファイルで性別毎に違った内容を書き出す

メンズ/レディースを振り分けて表示してみます！

jquery.csv.jsで、csvデータをクエリパラメーターで出力htmlを振り分ける

JavaScript

$(window).load(function () {

    //urlを取得
    var url   = location.href;
    //取得したurlを?を起点に分けて配列へ
    param    = url.split("?");
    //分けた?以降を&でも分けて配列へ
    param2   = param[1].split("&");
    // パラメータ用の配列を用意
    var par_Array = [];
    // 配列にパラメータを格納
    for ( i = 0; i < param2.length; i++ ) {
        neet = param2[i].split("=");
        par_Array.push(neet[0]);
        par_Array[neet[0]] = neet[1];
    }

    //格納したパラメーターの必要部分を変数に入れる
    var t_sex = par_Array["sex"];
    var t_item = par_Array["item"];
    //確認用
    console.log('t_sex:'+t_sex);
    console.log('t_item:'+t_item);

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

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

csvの該当列の値によって、if文で条件分岐を追加して、その前処理でクエリパラメーターの判別しています。
前回のcsvにすでに性別フラグが埋め込まれてることは気にしないでくださいｗ

htmlのaタグ部分は同じhtmlファイルを指定してクエリパラメータ－だけを変更しています！
こうすることでクエリパラメーターを変更するだけで性別を切り替えることができます。

こんな感じで作っていくと、自由度の高いcsvが作れてさらに処理もしやすくなるのでとっても便利ですよ！
しかもcsvを変更するだけでhtmlが自動で書き変わるので使い勝手は抜群です！

ただ、IEでcsvをキャッシュしちゃって最新の情報に更新されない…ということもあったのでreadcsv.jsの$.get(‘./itemlist.csv’,function(data){部分にクエリパラメーターを自動で付与することを忘れずに！