jqueryでの配列から絞り込んだデータをさらに絞り込み表示させたい

前提・実現したいこと

いつもお世話になっております。
毎度のことではありますが、初心者のため語句のおかしなところ等はご容赦ください。

上手に説明できる自信が無かったため、サンプル画像を作りました。

上の画で示したように、ある適性が各個人に数はバラバラであるものとして
その適性の詳細を表示させたいのですが、
・年代をクリックするごとにその年代に合致した人物一覧が下に表示される
・知りたい人物をクリックするとその人物の持つ適性の評価一覧が表示される
・知りたい適性をクリックするとその詳細が表示される
というのを一つのページ内でできたらいいなと思っています。
最初はタブページの切り替えを思いついたのですが、適性の総数が1000弱になっており
また人によって特性の数も3個～40個ととてもバラバラで
どのように表記すればよいのかが分からなくなったため質問させていただきました。

以前の質問でもjqueryとlodashの組み合わせで回答を頂けたので
今回もこれらを利用させていただこうと考えています。

※11/28 下記のスクリプトを編集しています。

試したこと

元々別件で動いていたスクリプトがあったため、それを編集し

jquery
1$(function() {
2　var allList = [
3　　{
4　　age:"20",
5　　name:"田中太郎",
6　　chara:["A","B","D","A","C","B","B"],
7　　skill:["炭酸飲料の一気飲み","グリーンピースの早食い","特技３","特技４","特技５","特技６","特技７"],
8　　desc:["調子がいい時は2リットルを30秒以内に飲める。","一度喉に詰まらせてから全盛期の勢いを失くした","説明３","説明４","説明５","説明６","説明７"],
9　　{
10　　age:"20",
11　　name:"鈴木花子",
12【以下、ずっと続きます】
13	];		
14
15　var productTemplate = _.template($("#productTemplate").text());
16　$(".filter_age input").on("click", render);
17　　render(allList);
18		
19　function render() {
20    var age = $('[name="age"]:checked').val();
21		var list = _(allList)
22		    	.filter(filterByAge(age))
23		.value();
24
25　　$('.productArea').html(productTemplate({list: list}));
26　　$("#filter_name input").on("click", function() { 
27            $('#dn1').show(); 
28            $('.displaynone').hide(); 
29			}); 	
30	　　$(".info_chara li").on("click", function() { 
31            $('.displaynone').show(); 
32        }); 
33　　　};
34
35　　function filterByAge(value) {
36	return (value == "") ? _.constant(true) : function(item) {
37	  　var ranges = {
38　		1: {age: "20"},
39		2: {age: "30"},
40		3: {age: "40"},
41		4: {age: "50"},
42   		};
43    	var range = ranges[value];
44      return range.age== item.age;
45		}
46	}	
47});

として、

html
1<div id="filter_age">
2　<label><input type="radio" name="age" value="1"><span>20代</span></label> |
3　<label><input type="radio" name="age" value="2"><span>30代</span></label> |
4　<label><input type="radio" name="age" value="3"><span>40代</span></label> |
5　<label><input type="radio" name="age" value="4"><span>50代</span></label>
6</div>
7<div class="productArea">
8<script type="text/template" id="productTemplate">
9　<div id="filter_name">
10　　<% _.each(list, function(line) { %>
11	<label><input type="radio" name="name" value="<%= line.name %>"><span><%= line.name %></span></label>
12　　<% }) %>	
13　</div>
14　<div id="dn1">
15    <% _.each(list, function(line) { %>
16　　  <div class="product">
17	<ul class="info_chara">
18　　　　　　<% _.each(line.chara, function(tag) { %>
19		<li class="productTitle"><span><%= tag %></span></li>
20           <% })%>
21	</ul>
22      </div>
23
24　<div id="right">
25　　<table>
26　　　<tr><th>名前</th><th>年齢</th><th>適性</th></tr>
27　　　<tr><td><span class="displaynone"><%= line.name %></span></td>
28　　　　　<td><span class="displaynone"><%= line.age %></span></td>
29　　　　　<td><span class="displaynone"><%= line.chara %></span></td></tr>
30　　　<tr><th colspan="3">特技</th></tr>
31　　　<tr><td colspan="3"><span class="displaynone"><%= line.skill %></span></td></tr>
32　　　<tr><th colspan="3">説明</th></tr>
33　　　<tr><td colspan="3"><span class="displaynone"><%= line.desc %></span></td></tr>
34    </table>
35  </div>
36    <% })%>
37</div>
38</script>

と記述しました。
すると、
「・年代をクリックするごとにその年代に合致した人物一覧が下に表示される」は
絞り込みによりクリアできたのですが
その下の適性一覧とその横のテーブルが全ての人物の全ての適性分表示されてしまいます。

人物名をクリックすることで適性一覧も絞り込み表示させたいのですが
人物リストは最初の絞り込みの結果でテンプレート上に出力されたものになっているので
どうやってさらに絞り込みで値を取り出すのかが自分には分かりませんでした。
（テーブルのline.charaをline.chara[x]にすると一つに絞り込めそうですが
そのxの拾い方が分からないのです）

どうか教えていただきたく思います。回答よろしくお願いいたします。

m.ts10806

2018/11/21 20:27

「動きませんでした」では何が起きて動かなかったのかわかりません。必要で他から持ってきたコピペコードであれば想定通り動くようになるまで調整しましょう。やりたいことそのままが拾えることってほとんどありません。せめて何が起きたか、どう動かなかったか、エラーが出ていないか提示してください(あとできればコードのインデントが滅茶苦茶なので調整しましょう)

toramo

2018/11/23 05:16

返信が遅くなってすみません。未熟な質問にコメント有難うございます。「_.template」を使用してHTML側に<%= %>形式で記入すればListの内容が表示できると思っていたのですが、実行してみると何も表示されないので、どこの記述が間違っているのか知りたかったのです。インデントについてのご指摘も有難うございます。修正させていただきます。

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

回答1件

ベストアンサー

とりあえずとっかかりから

javascript
1<style>
2[name=age]{display:none;}
3[name=age]+span{color:black;}
4[name=age]:checked+span{color:gray;}
5#name{color:blue;}
6</style>
7<script>
8$(function() {
9    var list = [
10      { age:"20",name:"name_001",chara:"A",skill:"skill_001",desc:"desc_001"},
11      { age:"20",name:"name_002",chara:"B",skill:"skill_002",desc:"desc_002"},
12      { age:"20",name:"name_003",chara:"C",skill:"skill_003",desc:"desc_003"},
13      { age:"20",name:"name_004",chara:"B",skill:"skill_004",desc:"desc_004"},
14      { age:"20",name:"name_005",chara:"A",skill:"skill_005",desc:"desc_005"},
15      { age:"20",name:"name_006",chara:"D",skill:"skill_006",desc:"desc_006"},
16      { age:"20",name:"name_007",chara:"A",skill:"skill_007",desc:"desc_007"},
17      { age:"30",name:"name_008",chara:"B",skill:"skill_008",desc:"desc_008"},
18      { age:"40",name:"name_009",chara:"B",skill:"skill_009",desc:"desc_009"},
19      ];
20  $('[name=age]').on('change',function(){
21    var l2=list.filter(function(x){
22      return x.age==$('[name=age]:checked').val();
23    }).map(function(x){
24      return x.name;
25    });
26    $('#name').html(l2.join(' '));
27  });
28});
29  
30</script>
31
32<div id="age">
33<label><input type="radio" name="age" value="20"><span>20代</span></label> |
34<label><input type="radio" name="age" value="30"><span>30代</span></label> |
35<label><input type="radio" name="age" value="40"><span>40代</span></label> |
36<label><input type="radio" name="age" value="50"><span>50代</span></label>
37</div>
38<div id="name"></div>

例示を見ると１人１charaしか持っていないようですが赤字の複数のcharaは
どこからもってくるのでしょうか？

投稿2018/11/22 00:52

編集2018/11/22 00:55

yambejp

総合スコア114968

toramo

2018/11/23 05:22

返信が遅くなりすみません。回答有難うございます。コメントを読ませて頂いたのですが、つまりcharaを1つずつ別の配列にするのではなく個人単位でcharaを複数組み込んだ方が分かりやすい記述になるという事でしょうか。 { age:"20代", name:"田中太郎", chara:["A","B"], skill:["炭酸飲料の一気飲み","グリーンピースの早食い"], desc:["調子がいい時は2リットルを30秒以内に飲める。","一度喉に詰まらせてから全盛期の勢いを失くした"], } のような… 頂いた最初の部分含め、少し自分で編集してみようと思います。有難うございます。

toramo

2018/11/26 15:46

すみません、日にちが経っていますが質問させてください。絞り込んだ内容を再び絞り込む…ということの道筋は見えたのですが、 name属性もラジオボックスで出力したい場合、「$('#name').html(l2.join(' '));」ここの部分をどのように変更すれば良いでしょうか。上記のままだと１つのラジオボックスに全ての名前が出力されてしまいました。 var template = [ "<% _.each(List, function(line) { %>", "<label><input type="radio" name="name" value="<%= line.name %>"><span id="name"><%= line.name %></span></label>", "<% }) %>" ].join(""); $("#name").append(_.template(template, l2)); テンプレートで出力する方法を考え上のように書き換えてみましたがやはり記述が間違っているようです。よろしければ教えていただきたく思います。

FKM

2018/11/30 00:17

join()は結合で、一本化する場合に用いるメソッドですね。分けて取得したいならsplit()です。また、htmlにすると、プロパティの有無に関係なく、全要素を取得してしまうので、選択されたラジオボタンなどに特化したいなら、 ``` $('#name:checked').html() ``` としないとだめです。

toramo

2018/12/01 16:01

コメントありがとうございます。 joinとsplitの違い、勉強になりました。また、選択したラジオボタンについても教えていただき有難うございました。

toramo

2018/12/01 16:05

yambejp　様大変遅くなりましたが、ベストアンサーにさせていただきました。お陰様で、教えていただいた式を使って無事にラジオボタン形式にもする事ができました。ただ、また新たな問題が発生してしまったので質問内容を何度も変えるのもおかしな話なのでまた新たに質問させて頂こうと思います。今回は本当に有難うございました。

FKM

2018/12/03 02:33

あと、補足ですが、html()はセキュリティ上に大きな危険があるので、text()の方がいいです。自分もうっかりそっちで紹介してしまいましたが。

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