前提・実現したいこと
jsonファイルを読み込み、例えばカテゴリごとに表示することを行おうとしておりますが、うまく実現ができません。
CODEPENにソースをアップしております。
https://codepen.io/m_a_u_v_e/pen/vdmYgX
jsonファイルの"category"によってフィルタリングをしたいと思っておりまして、
categoryは複数に設定可能の仕様になっています。
[
{
"category": ["cafe", "autum"],
"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"
},
・・・続く・・・
]
htmlファイルはラジオボタンにしてあり、valueの値で表示するカテゴリを判別します。
該当のソースコード
js
1//変数設定 2var $imageWrap=$("#imageWrap"); 3var alldata=[]; //ここはすべてのデータを保持しておく配列 4var filterdata=[]; //フィルターを掛けたデータを保持する配列 5 6 7//最初に読み込んだ時に発生する関数 8$.getJSON('http://jsrun.it/assets/c/s/y/n/csynt',init); 9 10function init(data){ 11 //全データを保持しておく 12 alldata=data; 13 14 //とりあえず全データを代入しておく 15 filterdata=alldata; 16 17 //データを表示させる 18 display(); 19} 20 21//画像表示させるための関数 22function display(){ 23 $imageWrap.empty(); 24 for(var i=0; i<filterdata.length; i++){ 25 $('<li><img src="'+filterdata[i].url+' " /><p>'+filterdata[i].caption+'</p></li>').appendTo($imageWrap); 26 } 27} 28 29//ラジオボタンが変わった時にフィルタリングする関数 30$('input:radio').change(function(){ 31 //チェックボタンの状況によってフィルタリングする 32 var cate=$(this).val(); 33 //フィルターの配列をいったん空っぽにする 34 filterdata=[]; 35 36 if(cate==="all"){//allが選択されたら全データを保持 37 filterdata=alldata; 38 39 }else{ 40 filterdata=$.grep(alldata,function(n){ 41 return n.category===cate; 42 }); 43 } 44 45 display(); 46}); 47
補足情報
仕組み自体は下記の記事を参考にしておりまして、
categoryが複数の場合での分岐方法が不明のため、
ご教授頂きたくお願いいたします。
http://the-zombis.sakura.ne.jp/wp/blog/2014/01/03/post-2094/
何卒よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/11 02:09
2018/02/11 02:12 編集