読み込んだJSONファイルでAND検索

Question

前提・実現したいこと

JSONファイルを読み込み、ラジオボタンにてカテゴリと年度の選択肢があり、
選択された両方の条件（AND検索）を満たすものだけjqueryにて表示させたいのですが、正しく表示ができません。

カテゴリと年度にて選択された条件をいずれも満たす場合での解決策を、ご教授頂きたくお願いいたします。

jsfiddleに現状のコードをアップいたしました。

https://jsfiddle.net/m_a_u_v_e/guLekpot/5/

該当のソースコード

[
    { "category": "[cafe,2021]", "caption": "カフェ 2021" },
    { "category": "[autum,2021]", "caption": "秋 2021" },
    { "category": "[tokyo,2021]", "caption": "東京 2021" },
    { "category": "[autum,2020]", "caption": "秋 2020" },
    { "category": "[tokyo,2020]", "caption": "東京 2020" },
    { "category": "[cafe,2020]", "caption": "カフェ 2020" }
]

$(function(){

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

	$.ajax({
		// 読み込みの設定
		type: "POST",
		url: "data.json", // ファイルパス（相対パス）
		dataType: "json", // ファイル形式
		success: init,
	});

	function init(data){
		alldata = data;
		//最初に読み込んだときは全部標示する
		filterdata=alldata;
		//表示させる
		display();
	}

  //画像表示
	function display(){
		$imageWrap.empty();
		for(var i=0; i < filterdata.length; i++){
			$('<li><p>'+filterdata[i].caption+'</p></li>').appendTo($imageWrap);
		}
	}

	//ラジオボタンが変わった時にフィルタリングする
	$('input:radio').change(function(){

		//チェックボタンの状況によってフィルタリングする
		var cate=$(this).val();

		//フィルターの配列をいったん空っぽにする
		filterdata=[];

		if(cate==="all"){//allが選択されたら全データを保持
			filterdata=alldata;
		
		}else{
		
			filterdata = $.grep(alldata,function(n, idx){
					return n.category.includes(cate);
				}
			);

		}

		display();
	
	});

});

<form>
	<p>カテゴリ</p>
	<div class="form01">
		<span>
			<input type="radio" name="list" value="all" checked>
			<label>All</label>
		</span>
		<span>
			<input type="radio" name="list" value="cafe">
			<label>cafe</label>
		</span>
		<span>
			<input type="radio" name="list" value="tokyo">
			<label>tokyo</label>
		</span>
		<span>
			<input type="radio" name="list" value="autum">
			<label>autum</label>
		</span>
	</div>
</form>
<form>
	<div class="form2">
		<p>年度</p>
		<span>
			<input type="radio" name="list" value="2021">
			<label>2021</label>
		</span>
		<span>
			<input type="radio" name="list" value="2020">
			<label>2020</label>
		</span>
	</div>
</form>

何卒よろしくお願いいたします。

Comments

[yambejp]

jsonデータが配列で管理するには不十分ですが、このフォーマットで確定でしょうか？

[m_a_u_v_e]

ご確認ありがとうございます。
jsonデータについてですが、フォーマットは確定ではございません。
どのような管理の仕方でも問題はありません。

Answer 1

まず JSON.stringifyする配列の要素を修正するで。

-           { "category": "[cafe,2021]", "caption": "カフェ 2021" },
-           { "category": "[autum,2021]", "caption": "秋 2021" },
-           { "category": "[tokyo,2021]", "caption": "東京 2021" },
-           { "category": "[autum,2020]", "caption": "秋 2020" },
-           { "category": "[tokyo,2020]", "caption": "東京 2020" },
-           { "category": "[cafe,2020]", "caption": "カフェ 2020" }
+           { category: ["cafe", "2021"], caption: "カフェ 2021" },
+           { category: ["autum" ,"2021"], caption: "秋 2021" },
+           { category: ["tokyo", "2021"], caption: "東京 2021" },
+           { category: ["autum","2020"], caption: "秋 2020" },
+           { category: ["tokyo", "2020"], caption: "東京 2020" },
+           { category: ["cafe", "2020"], caption: "カフェ 2020" }

修正前の "[cafe,2021]"だと、categoryプロパティの値は、 [cafe,2021] という配列ではなく、
"[cafe,2021]"というひとつの文字列になってまう。これは想定してるのとちゃうやろ。

ほんで、ラジオボタンの選択値が変わったときの処理は、いろいろやり方あんのやろけど、たとえばこないな感じ：

	//ラジオボタンが変わった時にフィルタリングする
	$('input:radio').change(function() {

	  // 2つのformにおけるラジオボタンの選択値を取得
	  var [category, year] = $('input:radio:checked').map((_, elem) => $(elem).val()).get();

	  // いったん filterdata　を alldata にリセット
	  filterdata = alldata;

	  // カテゴリによるフィルタ
	  if (category !== 'all') {
	    filterdata = filterdata.filter(e => e.category[0] === category);
	  }

	  // 年度によるフィルタ
	  if (year) {
	    filterdata = filterdata.filter(e => e.category[1] === year);
	  }

	  // 該当アイテムの表示
	  display();

	});

これで、一応動くやろと思いますわ。

そやけど、もう一点、お節介言わしてもらうと、冒頭でJSONにする配列要素を

-           { "category": "[cafe,2021]", "caption": "カフェ 2021" },
+           { category: ["cafe", "2021"], caption: "カフェ 2021" },

っていう修正しなはれと言うたけど、もひとつ言うと、これの categoryゆうプロパティの名前はどうもしっくりきまへんな。なぜかゆうたら、まず値が配列なのやから複数形にしたってくらはい。ほならcategories にすればええかいうたら、それでもよろしくない気いするわ。というのは画面ではこう

なっとって、「カテゴリ」というくくりで言われるものは、配列["cafe", "2021"] の先頭要素だけで、"2021" は「年度」というくくりで呼ばれるものだからです。そやから、たとえばの話、

{ tags: ["cafe", "2021"], caption: "カフェ 2021" }

にして、「tags はタグの配列で、その第一要素はカテゴリ、第二要素は年度を表すタグである。 」という仕様上の取り決めをするか、もしくは、いっそ配列をやめて

{ category: "cafe", year: 2021, caption: "カフェ 2021" }

にするとかしたほうがええんちゃう？思いました。
ほなまた〜

Comments

[m_a_u_v_e]

意図した動作になりました。
コードの細かいところ調べて理解したいと思います。
混乱を招かない命名についても必要と感じました。
色々とご教示いただきありがとうございます！

Answer 2

sample.json

[
    { "category": ["cafe", "2021"], "caption": "カフェ 2021" },
    { "category": ["autum","2021"], "caption": "秋 2021" },
    { "category": ["tokyo","2021"], "caption": "東京 2021" },
    { "category": ["autum","2020"], "caption": "秋 2020" },
    { "category": ["tokyo","2020"], "caption": "東京 2020" },
    { "category": ["cafe", "2020"], "caption": "カフェ 2020" }
]

<script>
window.addEventListener('DOMContentLoaded', async()=>{
  var data=await fetch("sample.json").then(res=>res.json());
  document.addEventListener('change',e=>{
    if(e.target.closest('[type=radio]')){
      var v1=document.querySelector('[name=list]:checked').value;
      var v2=document.querySelector('[name=nendo]:checked').value;
      view.textContent=data.filter(x=>(x.category.includes(v1)||v1=="all") && (x.category.includes(v2)||v2=="all")).map(x=>x.caption).join(",")
    }
  });
});

</script>
<form>
    <p>カテゴリ</p>
    <div class="form01">
        <span>
            <label><input type="radio" name="list" value="all" checked>
            All</label>
        </span>
        <span>
            <label><input type="radio" name="list" value="cafe">
            cafe</label>
        </span>
        <span>
            <label><input type="radio" name="list" value="tokyo">
            tokyo</label>
        </span>
        <span>
            <label><input type="radio" name="list" value="autum">
            autum</label>
        </span>
    </div>
    <div class="form2">
        <p>年度</p>
        <span>
            <label><input type="radio" name="nendo" value="all" checked>
            All</label>
        </span>
        <span>
            <label><input type="radio" name="nendo" value="2021">
            2021</label>
        </span>
        <span>
            <label><input type="radio" name="nendo" value="2020">
            2020</label>
        </span>
    </div>
</form>
<div id="view"></div>

Comments

[m_a_u_v_e]

ご教示誠にありがとうございます。JSONの方も不完全でした、失礼いたしました。
いただいたコードの方まだ理解などはできておりませんが、早速試してみました。
consoleにview is not defined at HTMLDocument.というエラーがでておりまして、
正常に検索機能ができていないようです。