jQueryで絞り込みした<li>を生成

あるいくつかの企画から「グループ」「場所」「ジャンル」で絞り込むコードを作成しようとしましたが、うまくいきませんでした。オブジェクトに格納されている値はconsole.log()使ってみましたが正常でした。（と思います…）ご教授お願いいたしますm( )m

html
1<!DOCTYPE>
2<html>
3<head>
4    <meta charset="utf-8" />
5    <script src='jquery-1.11.3.min.js'></script>
6    <script src="script7.js"></script>
7</head>
8<body>
9    <form>
10    <select id="groupval">
11        <option value="" selected>選択しない</option>
12        <option value="0">クラブ</option>
13        <option value="1">クラス</option>
14    </select>
15    <select id="placeval">
16        <option value="" selected>選択しない</option>
17        <option value="0">Ｂ１</option>
18        <option value="1">Ｂ２</option>
19    </select>
20    <select id="genreval">
21        <option value="" selected>選択しない</option>
22        <option value="0">食べ物</option>
23        <option value="1">アトラクション</option>
24    </select>
25    </form>
26    <ul id="searchcontainer">
27    </ul>
28</body>
29</html>

javascript
1var DB = {
2    group: {
3        club: [],
4        class: []
5    },
6    place: {
7        B1: [],
8        B2: []
9    },
10    genre: {
11        eatting: [],
12        attraction: []
13    },
14    all: []
15},
16    DATA = [ //['group','place','genre','name']
17  ['club', 'B1', 'eatting', 'SOCCER'], 
18  ['club', 'B2', 'eatting', 'BASEBALL'], 
19  ['class','B1', 'eatting','1-1']
20],
21    CONTENTS = { //['image','contents']
22        'SOCCER': ['"images/.jpg"','あああ'],
23        'BASEBALL': ['"images/.jpg"','いいい'],
24        '1-1': ['"images/.jpg"','ううう']
25};
26for (var i = 0; i < DATA.length; i++) {
27    var group = DATA[i][0],
28        place = DATA[i][1],
29        genre = DATA[i][2];
30    DB['group'][group].push(DATA[i][3]);
31    DB['place'][place].push(DATA[i][3]);
32    DB['genre'][genre].push(DATA[i][3]);
33    DB['all'].push(DATA[i][3]);
34};
35$(document).ready(function() {
36    var $groupval = $('#groupval'),
37        $placeval = $('#placeval'),
38        $genreval = $('#genreval'),
39        $searchcontainer = $('#searchcontainer');
40        show(DB['all']);
41    $('select').on('change',function() {
42        $searchcontainer.empty();//reset
43        var groupval = DB['group'][$groupval.val()],//value 0=>club 1=>class ...
44            placeval = DB['place'][$placeval.val()],//value 0=>B1 1=>B2  ...
45            genreval = DB['genre'][$genreval.val()];//value 0=>eatting 1=>attraction ...
46        if (groupval == null )
47            groupval = DB['all'];
48        if (placeval == null)
49            placeval = DB['all'];
50        if (genreval == null)
51            genreval = DB['all'];
52        var result_chain_before = groupval.concat(placeval),
53            result_before = result_chain_before.filter(function (x) {
54                return result_chain1.indexOf(x) !== result_chain1.lastIndexOf(x);
55            });
56            result_before = jQuery.unique(result_before);
57        var result_chain = result_before.concat(genreval),
58            result = result_chain.filter(function (x) {
59            return result_chain.indexOf(x) !== result_chain.lastIndexOf(x);
60        });
61        result = jQuery.unique(result);
62        show(result);
63    });
64    function show(result) {
65        for (var i = 0; i < result.length; i++) {
66            $('<li><img src=' + CONTENTS[result[i]][0] + '><p>' + CONTENTS[result[i]][1] + '</p>').prependTo($searchcontainer);
67        };
68    };
69});

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

回答3件

ベストアンサー

optionのvalueが0や1なんですが、DB上ではclubやclassという名前で格納されており、
そのままでは0や1という数字を使ってアクセスしようと思っても不可能な状態でした。
0や1でアクセスしたいなら一工夫必要です。

下記では、optionのvalueをDBのキー名に合わせています。
セレクトボックスの値が変更されたら、changeListを実行するようにしています。
changeList内では、optionの値を元にDBの値を取ります。
もし、DBの値が取得できない場合は、空の配列を返すようにしています。

groupVal = DB.group[this.$group.val()] || [], ←この部分

その後、groupVal、placeVal、genleValを全て結合し、重複を除去したものを resultに代入します。
もし、resultが空の配列（groupVal、placeVal、genleValが全て空の配列のケース）だった場合は、DB.allを代入し、全てを表示するケースと同じにします。

そうしてできた結果の配列を、showResultに渡し、画面上に表示させます。
どんな値をどう処理しているかはコンソールを参照してください。

html
1<form>
2    <select id="groupval">
3        <option value="" selected>選択しない</option>
4        <option value="club">クラブ</option>
5        <option value="class">クラス</option>
6    </select>
7    <select id="placeval">
8        <option value="" selected>選択しない</option>
9        <option value="B1">Ｂ１</option>
10        <option value="B2">Ｂ２</option>
11    </select>
12    <select id="genreval">
13        <option value="" selected>選択しない</option>
14        <option value="eating">食べ物</option>
15        <option value="attraction">アトラクション</option>
16    </select>
17    </form>
18    <ul id="searchcontainer">
19    </ul>

js
1var DB = {
2    group: {
3      club: [],
4      class: []
5    },
6    place: {
7      B1: [],
8      B2: []
9    },
10    genre: {
11      eatting: [],
12      attraction: []
13    },
14    all: []
15  },
16  DATA = [ //['group','place','genre','name']
17    ['club', 'B1', 'eatting', 'SOCCER'],
18    ['club', 'B2', 'eatting', 'BASEBALL'],
19    ['class', 'B1', 'eatting', '1-1']
20  ],
21  CONTENTS = { //['image','contents']
22    'SOCCER': ['"images/.jpg"', 'あああ'],
23    'BASEBALL': ['"images/.jpg"', 'いいい'],
24    '1-1': ['"images/.jpg"', 'ううう']
25  };
26
27$.map(DATA, function(item, index) {
28  var group = item[0],
29    place = item[1],
30    genre = item[2],
31    data = item[3];
32
33  DB.group[group].push(data);
34  DB.place[place].push(data);
35  DB.genre[genre].push(data);
36  DB.all.push(data);
37});
38
39console.table(DB);
40
41var filtering = function() {
42  this.init();
43};
44
45filtering.prototype = {
46  init: function() {
47    this.$group = $('#groupval');
48    this.$place = $('#placeval');
49    this.$genre = $('#genreval');
50    this.$searchcontainer = $('#searchcontainer');
51    this.$select = $('select');
52
53    this.showResult(DB.all);
54    
55    console.log('all', DB.all)
56    this.bindEvent();
57  },
58  bindEvent: function() {
59    var _self = this;
60
61    this.$select.on('change', function() {
62      _self.changeList();
63    });
64  },
65  showResult: function(result) {
66    var $list = $.map(result, function(item, index) {
67      var data = CONTENTS[item],
68        src = data[0],
69        name = data[1],
70        $li = $('<li />'),
71        $img = $('<img />').attr('src', src),
72        $text = $('<p />').text(name);
73
74      $li.append($img, $text);
75
76      return $li;
77    });
78
79    console.log($list);
80
81    this.$searchcontainer.append($list);
82  },
83  changeList: function() {
84    var groupVal = DB.group[this.$group.val()] || [],
85      placeVal = DB.place[this.$place.val()] || [],
86      genreVal = DB.genre[this.$genre.val()] || [],
87      result = $.unique(groupVal.concat(placeVal, genreVal));
88   
89    console.log(groupVal, placeVal, genreVal);
90    console.log('result', result);
91    
92    if(result.length === 0){
93      result = DB.all;
94    }
95
96    this.$searchcontainer.empty(); 
97    this.showResult(result);
98  }
99};
100
101$(function() {
102  new filtering();
103});

追記ですが、groupVal, placeVal, genreValを求める部分を共通の関数で処理するよう
下記の形に書き換えることも出来ます。

js
1  getVal: function(key, value){
2    return DB[key][value] || [];
3  },
4  changeList: function() {
5    var groupVal = this.getVal('group', this.$group.val()),
6      placeVal = this.getVal('place', this.$place.val()),
7      genreVal = this.getVal('genre', this.$genre.val()),
8// 以下同様
9

投稿2016/02/27 03:24

編集2016/03/06 11:25

yamato_hikawa

総合スコア2092

urawanousagi

2016/02/27 10:50 編集

ありがとうございました。 prototypeの使い方などとても参考になりました追記：すみません。ロード時にどの内容も表示されず仕様かなと思っていたらinitでshowResultを呼び出していておかしいなと思いました… なぜ表示されないのか調べていたのですがわかりませんでした。お手数ですが対処法をお願いしますm( )m

yamato_hikawa

2016/02/27 14:03 編集

initはロード時に一度だけ実行される部分です。なので、showResultを実行して全ての結果を表示するようにしています（ロード時に一度これを実行しないと何も表示してくれないので）さらにイベントの関連付けも合わせて行っています。

urawanousagi

2016/02/27 14:31

それには気付いたのですが… コピペしてhtml開いても最初(ロード時)は表示されないんです(/’△`)

yamato_hikawa

2016/02/27 15:19

JSだけでなく、HTMLもvalueを書き換えてますが、それも適用していますか？こちらではロード時にリストの表示はされています（ただ、画像パスが不完全なので、画像自体は出ませんが）

urawanousagi

2016/02/27 15:39

あっ！！お騒がせしました

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

[0] や [1] といった配列の添え字があちこち出てくるのがよろしくないなあ、と思ったのと、group, place, genre の他にも選択できる項目が増えても修正しやすいように、とか、配列じゃなくて連想配列で持っていたほうがバグは入りにくいかな、でも管理しているデータは Excel とかの表計算ソフトなのかな、だとしたら初期データは配列のほうがいいよな、とか思いながらいじっていたら、元のコードを活かすつもりがわりと別物になってしまいました。

これで望みの動きになっているでしょうか。わからないところがあれば質問してください。時間が取れるときに解説する努力をします。

html
1<html>
2<head>
3    <meta charset="utf-8" />
4    <!-- script src='jquery-1.11.3.min.js'></script -->
5    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
6    <script src="script7.js"></script>
7</head>
8<body>
9    <form>
10    <select id="groupval">
11        <option value="dummy">dummy</option>
12    </select>
13    <select id="placeval">
14      <option value="dummy">dummy</option>
15    </select>
16    <select id="genreval">
17      <option value="dummy">dummy</option>
18    </select>
19    </form>
20    <ul id="searchcontainer">
21    </ul>
22</body>
23</html>

javascript
1$(function() {
2  var planRawDatun = [
3    'club,B1,eating,SOCCER,soccer.jpg,あああ',
4    'club,B2,eating,BASEBALL,baseball.jpg,いいい',
5    'class,B1,eating,1-1,etc.jpg,ううう'
6  ];
7  var plans = (function(raw, plans, fieldNames) {
8    raw.forEach(function(record) {
9      var fields = record.split(',');
10      var name = fields[3];
11      plans[name] = {};
12      fieldNames.forEach(function(fieldName, i) {
13        plans[name][fieldName] = fields[i];
14      });
15    });
16    return plans;
17  })(planRawDatun, {}, 'group,place,genre,name,img,title'.split(','));
18  var optionList = { group: 'club:クラブ,class:クラス',
19    place: 'B1:Ｂ１,B2:Ｂ２',
20    genre: 'eating:食べ物,attraction:アトラクション' };
21  var options = (function(opts, spec) {
22    for (var optName in spec) {
23      opts[optName] = [ { val: '', caption: '選択しない' } ];
24      spec[optName].split(',').forEach(function(record) {
25        var fields = record.split(':');
26        opts[optName].push( { val: fields[0], caption: fields[1] } );
27      });
28    }
29    return opts;
30  })({}, optionList);
31  console.log(plans, options);
32  var $searchcontainer = $('#searchcontainer');
33  var $opts = (function($opts) {
34    for (var optName in options) {
35      var $o = $('#' + optName + 'val').empty();
36      options[optName].forEach(function(opt) {
37        $o.append($('<option>').attr('value', opt.val).text(opt.caption));
38      });
39      $o.find(':first').attr('selected', 'selected');
40      $opts.vals[optName] = $o;
41    }
42    $opts.val = function() {
43      var v = {};
44      for (var name in this.vals) {
45        v[name] = this.vals[name].val();
46      }
47      return v;
48    };
49    return $opts;
50  })({ vals: {} });
51  function show() {
52    $searchcontainer.empty(); //reset
53    var vals = $opts.val();
54    for (var name in plans) {
55      var plan = plans[name];
56      var flag = (function() {
57        for (var optName in optionList) {
58          if (vals[optName] !== '' && vals[optName] !== plan[optName]) {
59            return false;
60          }
61        }
62        return true;
63      })();
64      if (flag) {
65        $('<li><img src=images/' + plan.img + '><p>' + plan.title + '</p>').prependTo($searchcontainer);
66      }
67    }
68  }
69  $('select').on('change', function() {
70    show();
71    return false;
72  });
73});

投稿2016/02/27 00:32

unau

総合スコア2468

urawanousagi

2016/02/27 09:54

回答ありがとうございます。今後の修正も鑑みてお答えいただいて大変恐縮なのですが初心者なもので読めませんでした… この前サイの絵がある参考書を買ったのでそれを読み終えある程度JavaScriptを理解したらこのコードに変更させていただきます。（自力で読めるようになったら）また困った時があればお願いしますありがとうございました

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

JavaScript内の「result_chain1」は名前変更ミスでしょうか。

投稿2016/02/26 14:40