複数条件のフィルタリング機能

絞り込み検索のボタンを押した際に、ラジオボタンで選択されている項目のみフィルタリングをし、DOMを表示させたいです。
なお、データはJSONを使用いたします。

現状の記述ですと、以下のJSONのmember_categoryでしか検索ができず、
条件が増えた際のフィルタリング方法ができておりません。

何か解決するためのいいアドバイスをいただけますと幸いです。。。

例えば、
・「member_category」+「member_name」を合わせた条件で検索
・「member_category」+「member_name」+「item_name」を合わせた条件で検索

といったことを実現したいです。

■JSON

	{
		"member_id": 0,
		"member_category": "Katsura",
		"member_name": "Ryo",
		"item_id": 0,
		"item_name": "item_name[00]",
		"item_src": "./inc/img/item00.jpg"
	},
	{
		"member_id": 1,
		"member_category": "Katsura",
		"member_name": "Hiroko",
		"item_id": 1,
		"item_name": "item_name[01]",
		"item_src": "./inc/img/item01.jpg"
	},
	{
		"member_id": 2,
		"member_category": "Hiroshima",
		"member_name": "Sei",
		"item_id": 2,
		"item_name": "item_name[02]",
		"item_src": "./inc/img/item02.jpg"
	},
	{
		"member_id": 3,
		"member_category": "Hiroshima",
		"member_name": "Yukiko",
		"item_id": 3,
		"item_name": "item_name[03]",
		"item_src": "./inc/img/item03.jpg"
	},
	{
		"member_id": 4,
		"member_category": "Hiroshima",
		"member_name": "Kanoko",
		"item_id": 4,
		"item_name": "item_name[04]",
		"item_src": "./inc/img/item04.jpg"
	}
	
]

■HTML

<div class="member">
<h2>メンバー</h2>
<input type="radio" name="member" value="Katsura">
<input type="radio" name="member" value="Hiroshima">
<input type="radio" name="member" value="Maizuru">
</div>

<div class="name">
<h2>名前</h2>
<input type="radio" name="name" value="Ryo">
<input type="radio" name="name" value="Hiroko">
<input type="radio" name="name" value="Sei">
<input type="radio" name="name" value="Yukiko">
<input type="radio" name="name" value="Kanoko">
</div>

<ul id="list"></ul>

<div><input class="search" type="submit" name="" value="絞り込み検索"></div>

■JS

(function(window,namespace,$){

    function _Item(dataFilter,i,$_list){
        this.member_id = dataFilter[i].member_id;
        this.member_category = dataFilter[i].member_category;
        this.member_name = dataFilter[i].member_name;
        this.item_id = dataFilter[i].item_id;
        this.item_name = dataFilter[i].item_name;
        this.item_src = dataFilter[i].item_src;
        this.addList($_list);
    }

    _Item.prototype.addList = function($_list){
        $_list.append(
            '<li>'
            + '<figure><img src="' + this.item_src + '"/></figure>'
            + '<span>' + this.member_id + '</span>'
            + '<span>' + this.member_name + '</span>'
            + '<span>' + this.member_category + '</span>'
            + '<span>' + this.item_id + '</span>'
            + '<span>' + this.item_name + '</span>'
            + '</li>'
        );
    }

    window[namespace] = {

        init: function(json){
            var data = json;
            this.getDataAll(data);
            this.change(data);
        },

        change: function(data){

            var that = this;

            $('.search').on('click',function(){
                    var value = $('.member input[name="member"]:checked').val();
                    _case(data,'member_category',value);
            });

            function _case(data,subject,value){
                    that.getDataFilter(data,value,subject);
            }

        },

        getDataAll: function(data){
            var dataFilter = data;
            this.display(dataFilter);
        },

        getDataFilter: function(data,value,subject){
            var dataAll = data;
            var dataFilter = [];
            var str = new RegExp(value,'i');
            dataFilter = dataAll.filter(function(item,index){
                if(item[subject].match(str)){
                    return true;
                };
            });
            this.display(dataFilter);
        },

        display: function(dataFilter){
            var len = dataFilter.length;
            var $_list = $('#list');
            $_list.empty();
            for (var i = 0; i < len; i++) {
                new _Item(dataFilter,i,$_list);
            };
        }
    }

})(this,'DataBind',jQuery);

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1<!DOCTYPE html>
2<title>?</title>
3<meta charset="utf-8">
4<style>
5span { padding: 0 1ex; }
6</style>
7<body>
8<div class="member">
9<h2>メンバー</h2>
10<input type="radio" name="member" value="">All
11<input type="radio" name="member" value="Katsura">Katsura
12<input type="radio" name="member" value="Hiroshima">Hiroshima
13<input type="radio" name="member" value="Maizuru">Maizuru
14</div>
15
16<div class="name">
17<h2>名前</h2>
18<input type="radio" name="name" value="">All
19<input type="radio" name="name" value="Ryo">Ryo
20<input type="radio" name="name" value="Hiroko">Hiroko
21<input type="radio" name="name" value="Sei">Sei
22<input type="radio" name="name" value="Yukiko">Yukiko
23<input type="radio" name="name" value="Kanoko">Kanoko
24</div>
25
26<ul id="list"></ul>
27
28<script>
29let json = [
30    {
31        "member_id": 0,
32        "member_category": "Katsura",
33        "member_name": "Ryo",
34        "item_id": 0,
35        "item_name": "item_name[00]",
36        "item_src": "./inc/img/item00.jpg"
37    },
38    {
39        "member_id": 1,
40        "member_category": "Katsura",
41        "member_name": "Hiroko",
42        "item_id": 1,
43        "item_name": "item_name[01]",
44        "item_src": "./inc/img/item01.jpg"
45    },
46    {
47        "member_id": 2,
48        "member_category": "Hiroshima",
49        "member_name": "Sei",
50        "item_id": 2,
51        "item_name": "item_name[02]",
52        "item_src": "./inc/img/item02.jpg"
53    },
54    {
55        "member_id": 3,
56        "member_category": "Hiroshima",
57        "member_name": "Yukiko",
58        "item_id": 3,
59        "item_name": "item_name[03]",
60        "item_src": "./inc/img/item03.jpg"
61    },
62    {
63        "member_id": 4,
64        "member_category": "Hiroshima",
65        "member_name": "Kanoko",
66        "item_id": 4,
67        "item_name": "item_name[04]",
68        "item_src": "./inc/img/item04.jpg"
69    }
70
71];
72//_______________________
73
74{
75  const
76    A = document,
77    B = (...ns) => ns.map (n => A.createElement (n)),
78    C = (function () {
79      let [li, f, i, ...sp] = B ('li', 'figure', 'img', 'span', 'span', 'span', 'span', 'span');
80      let l = ['member_id', 'member_name', 'member_category', 'item_id', 'item_name'];
81      li.appendChild (f).appendChild (i); sp.forEach (e => li.appendChild (e));
82      return (obj) => {
83        i.src = i.alt = obj.item_src;
84        l.forEach ((n, i) => sp[i].textContent = obj[n]);
85        return li.cloneNode (true);
86      };
87    })();
88
89
90  
91  class E {
92    constructor (target, json, handler) {
93      this.target = target;
94      this.origin = json;
95      this.handler = handler;
96      this.data = [ ];
97    }
98    
99
100    dataFilter (...cond) {
101      let a = this.origin.slice ();//copy
102      cond.forEach (([sub, val])=> {
103        let reg = new RegExp (val.replace (/[-/\^$*+?.()|[]{}]/g, '\$&'), 'i');
104        a = a.filter (d => reg.test (d[sub]));
105      });
106      this.data = a;
107      return this;
108    }
109    
110    
111    display () {
112      let list = this.target;
113      for (let p = list, e; e = p.firstChild; e.remove ());
114      this.data.forEach (d => list.appendChild (C (d)));
115      return this;
116    }
117    
118    
119    handleEvent (event) {
120      let rst = this.handler.call (this, event);
121      if (rst)
122         this.dataFilter (...rst).display ();
123    }
124
125  }
126  
127  this.E = E;
128}
129
130//_______________________________
131
132const handler = event => {
133  let e = event.target;
134  let h = { name: 'member_name', member: 'member_category' };
135  
136  if (/^(member|name)$/.test (e.name)) {
137    let doc = e.ownerDocument;
138    let es = doc.querySelectorAll ('input[name="name"]:checked, input[name="member"]:checked'); 
139    return [...es].map (e => [h[e.name], e.value]);
140  }
141  else
142    event.preventDefault();
143
144  return null;
145};
146
147
148let DataBind = new E (document.querySelector ('#list'), json, handler);
149document.addEventListener ('change', DataBind, false);
150
151</script>
152