読み込んだjsonファイルをjqueryでフィルタリング処理の練習

javascript

jsonファイルで、読み込んだ画像リストを表示するのは、まぁそんな難しくないけども、例えば画像のカテゴリごとに表示させるようなフィルターをかけるにはどうしたらいいんだろうってことで調べました。

jsonファイルの構造

とりあえずjsonファイルは下記のように記述しました。

まぁなんとなく分かると思いますが（笑） captionは、画像の下に表示するキャプションでurlは画像までのパスです。そんでフィルタリングするときに必要なのが、categoryです。


[

{
"category": "cate",
"caption": "カフェ",
"url": "http://jsrun.it/assets/3/o/C/A/3oCAy.jpg"
},

{
"category": "autum",
"caption": "紅葉",
"url": "http://jsrun.it/assets/y/c/W/i/ycWii.jpg"
},

{
"category": "tokyo",
"caption": "東京駅",
"url": "http://jsrun.it/assets/n/O/V/x/nOVx2.jpg"
},

{
"category": "autum",
"caption": "紅葉２",
"url": "http://jsrun.it/assets/h/I/X/B/hIXBO.jpg"
},

{
"category": "tokyo",
"caption": "東京タワー",
"url": "http://jsrun.it/assets/j/S/t/n/jStnu.jpg"
}

]

htmlファイルの構造

htmlファイルはとりあえず、フォームはラジオボタンにしてあり、valueの値をjsonファイルのcategoryの値と同じにします。条件分岐の際に必要になります。

そして、jsonファイルから読み込んだデータをリストで表示したいのでulタグを記述してid名など付けておきます。

javascript（jquery）の構造

javascript(jquery)の記述は下記のとおりです。少し長いの分割して書いていきます。


//変数設定
var $imageWrap=$("#imageWrap");
var alldata=[]; //ここはすべてのデータを保持しておく配列
var filterdata=[]; //フィルターを掛けたデータを保持する配列


//最初に読み込んだ時に発生する関数
$.getJSON('http://jsrun.it/assets/c/s/y/n/csynt',init);

function init(data){
   //全データを保持しておく
   alldata=data;
   
   //とりあえず全データを代入しておく
   filterdata=alldata;
   
   //データを表示させる
   display();
}

//画像表示させるための関数
function display(){
    $imageWrap.empty();
    for(var i=0; i
'+filterdata[i].caption+'
').appendTo($imageWrap); 
    }
}

//ラジオボタンが変わった時にフィルタリングする関数
$('input:radio').change(function(){
    //チェックボタンの状況によってフィルタリングする
    var cate=$(this).val();
    //フィルターの配列をいったん空っぽにする
    filterdata=[];
    
    if(cate==="all"){//allが選択されたら全データを保持
        filterdata=alldata;
       
    }else{ 
       filterdata=$.grep(alldata,function(n){
            return n.category===cate;
            });
    }
    
    display();
});

変数設定

$imageWrap jsonファイルを読みこんだ後に表示させるためのラッパー要素
alldata jsonファイルから読みこんだ全データを保持するための配列
filterdata フィルターをかけて抽出したデータを保存するための配列

ちなみに「$imageWrap」に関しては、jqueryオブジェクトの参照を保持するための変数です。のちのちjqueryのempty()を利用するためです。

最初に読み込んだ時に発生する関数：init()


function init(data){
   
   //全データを保持しておく
   alldata=data;
   
   //とりあえず全データを代入しておく
   filterdata=alldata;
   
   //データを表示させる
   display();
}

「$.getJSON」でjsonファイルを読みこんだ後に、init()を実行させています。関数の引数のdataプロパティにはgetJSONで読みこんだjsonファイルのデータが格納されています。

alldataには全データを保存しておきます。この変数は基本的には全データを保存しておく役割だけなので、以後この値が変わることはない。

filterdataは、基本的にはラジオボタンのチェックされた状況に応じて値が変化する変数です。ただ最初に読み込まれたときは全部のデータを表示させておきたいので、alldataの値を代入しています。

その後にdisplayメソッドを実行しています。

画像表示させるための関数：display()

この関数では、jsonファイルのデータから画像のurlとキャプションである文字列を取り出して表示させるための関数です。


function display(){
    $imageWrap.empty();
    for(var i=0; i
'+filterdata[i].caption+'
').appendTo($imageWrap); 
    }
}

まず最初に、$imageWrapの子要素を全て削除し、空にするためにempty()を実行します。
ここで実行しておかないと最初に読み込んだときやフィルタリングされた時の以前のデータが残ってしまい、どんどんデータが追加されていくだけになるからです。

あとはfilterdataにあるデータの数だけfor文でぶん回して、$imageWrapにappendTo()で追加する。

ラジオボタンが変わった時にフィルタリング処理する関数：change()

この関数は、カテゴリを示すラジオボタンのチェックした値が変わった時に実行されます。その時にjsonファイルからチェックされたカテゴリのデータを抽出します。


$('input:radio').change(function(){
    //チェックボタンの状況によってフィルタリングする
    var cate=$(this).val();
    //フィルターの配列をいったん空っぽにする
    filterdata=[];
    
    if(cate==="all"){//allが選択されたら全データを保持
        filterdata=alldata;
       
    }else{ 
       filterdata=$.grep(alldata,function(n){
            return n.category===cate;
            });
    }
    
    display();
});

最初にチェックされたラジオボタンのvalueの値（カテゴリーの文字列）を取得して変数cateに代入しておきます。

あたらしくデータを抽出するので一旦、filterdataにあるデータを空っぽにするために配列を初期化します。

後は、変数cateの値がallだったら、alldataの全部のデータをfilterdataに代入して、それ以外であれば、$.grep()を利用してalldataを走査してチェックされたカテゴリーの値とalldataにあるjsonファイルのcategoryの値が合っているかチェックします。その値が合っていた場合には、returnでその値がfilterdataに返り値として代入されます。

データを新たに抽出してfilterdataに代入されたらdisplay()で表示させます。