絞り込み機能について

Question

やりたいこと

jQueryを使って、チェックボックスを使っての絞り込み表示を実装したいです。
例えばtypeのAとcategoryのanimalにチェックが入っていた時、どちらの条件も満たした配列としたいです。
またcategoryのanimalとplantなど同一属性内で複数チェックがあった時、animalあるいはplantどちらかの条件を満たした配列としたいです。
現状typeでの絞り込みまで完成しており、type内で複数チェックがあった時の処理は未実装です。

<div class="is-type">
 <h2>タイプでの絞り込み</h2>
 <input type="checkbox" name="type" value="A"> A
 <input type="checkbox" name="type" value="B"> B
 <input type="checkbox" name="type" value="C"> C
</div>

<div class="is-type">
 <h2>カテゴリでの絞り込み</h2>
 <input type="checkbox" name="category" value="animal"> animal
 <input type="checkbox" name="category" value="plant"> plant
</div>

<ul class="is-list"></ul>

// アイテムの情報
const itemList = [
 { type: 'A', category: 'animal' },
 { type: 'B', category: 'plant' },
 { type: 'C', category: 'animal' }
]

// HTMLの生成
const createItem = list => {
  const listObject = $('.is-list');
  let listHTML = '';

  if (list.length > 0) {
    $(list).each((index, item) => {
      listHTML += `<li>`
      listHTML += `<p>${ item.type }は${ item.category }です</p>`
      listHTML += `</li>`
    });
  }

  listObject.html(listHTML);
}

// 絞り込み表示
const filteredItem = () => {
  let newItemList = [];

  createItem(itemList);

  $('.is-type input').on('change', () => {
    const chekedItems = $('.is-type input:checked');

    newItemList = itemList.filter(item => item.type === chekedItems.val());
    createItem(newItemList);
  });
}

困っていること

同一属性内で複数チェックがあった時にいずれかの条件を満たした配列を作るにはどうすればいいかわからず困っております。。
また現状ではtypeでの絞り込みまでですが、ここからcategoryでの絞り込みを追加した時にtypeとcategoryどちらの条件も満たした配列を作るにはどうしたらいいかわからない状況です。
よろしくお願いします。

Comments

[Lhankor_Mhy]

&& を使えばよさそうに思うのですが、ダメですか？

Answer 1

こんな感じです

<script>
$(()=>{
  $('.is-type :checkbox').on('change',()=>{
    const types=$('[name=type]:checked').map((x,y)=>$(y).val()).get();
    const categories=$('[name=category]:checked').map((x,y)=>$(y).val()).get();
    const itemList = [
      { type: 'A', category: 'animal' },
      { type: 'B', category: 'plant' },
      { type: 'C', category: 'animal' }
      ];
    $('.is-list').empty();
    itemList
      .filter(x=>$.inArray(x.type,types)>-1 && $.inArray(x.category,categories)>-1)
      .forEach(x=>{
        $('.is-list').append($('<li>').append($('<p>').text(`${x.type}は${x.category }です`)));
      }); 
  }).eq(0).trigger('change');
});
</script>


<div class="is-type">
 <h2>タイプでの絞り込み</h2>
<label> <input type="checkbox" name="type" value="A"> A</label>
<label> <input type="checkbox" name="type" value="B"> B</label>
<label> <input type="checkbox" name="type" value="C"> C</label>
</div>

<div class="is-type">
 <h2>カテゴリでの絞り込み</h2>
<label> <input type="checkbox" name="category" value="animal"> animal</label>
<label> <input type="checkbox" name="category" value="plant"> plant</label>
</div>

<ul class="is-list"></ul>

Comments

[miyabeam]

なるほど…
複数チェックには `map` で配列を作っておいて、 `filter` で絞り込めばいいんですね！
ES6勉強し始めだったので大変参考になりました。ありがとうございます！