質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.57%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 786

toramo

score 14

 前提・実現したいこと

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

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

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

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

 試したこと

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

$(function() {
 var allList = [
  {
  age:"20",
  name:"田中太郎",
  chara:["A","B","D","A","C","B","B"],
  skill:["炭酸飲料の一気飲み","グリーンピースの早食い","特技3","特技4","特技5","特技6","特技7"],
  desc:["調子がいい時は2リットルを30秒以内に飲める。","一度喉に詰まらせてから全盛期の勢いを失くした","説明3","説明4","説明5","説明6","説明7"],
  {
  age:"20",
  name:"鈴木花子",
【以下、ずっと続きます】
    ];        

 var productTemplate = _.template($("#productTemplate").text());
 $(".filter_age input").on("click", render);
  render(allList);

 function render() {
    var age = $('[name="age"]:checked').val();
        var list = _(allList)
                .filter(filterByAge(age))
        .value();

  $('.productArea').html(productTemplate({list: list}));
  $("#filter_name input").on("click", function() { 
            $('#dn1').show(); 
            $('.displaynone').hide(); 
            });     
      $(".info_chara li").on("click", function() { 
            $('.displaynone').show(); 
        }); 
   };

  function filterByAge(value) {
    return (value == "") ? _.constant(true) : function(item) {
       var ranges = {
         1: {age: "20"},
        2: {age: "30"},
        3: {age: "40"},
        4: {age: "50"},
           };
        var range = ranges[value];
      return range.age== item.age;
        }
    }    
});


として、

<div id="filter_age">
 <label><input type="radio" name="age" value="1"><span>20代</span></label> |
 <label><input type="radio" name="age" value="2"><span>30代</span></label> |
 <label><input type="radio" name="age" value="3"><span>40代</span></label> |
 <label><input type="radio" name="age" value="4"><span>50代</span></label>
</div>
<div class="productArea">
<script type="text/template" id="productTemplate">
 <div id="filter_name">
  <% _.each(list, function(line) { %>
    <label><input type="radio" name="name" value="<%= line.name %>"><span><%= line.name %></span></label>
  <% }) %>    
 </div>
 <div id="dn1">
    <% _.each(list, function(line) { %>
    <div class="product">
    <ul class="info_chara">
      <% _.each(line.chara, function(tag) { %>
        <li class="productTitle"><span><%= tag %></span></li>
           <% })%>
    </ul>
      </div>

 <div id="right">
  <table>
   <tr><th>名前</th><th>年齢</th><th>適性</th></tr>
   <tr><td><span class="displaynone"><%= line.name %></span></td>
     <td><span class="displaynone"><%= line.age %></span></td>
     <td><span class="displaynone"><%= line.chara %></span></td></tr>
   <tr><th colspan="3">特技</th></tr>
   <tr><td colspan="3"><span class="displaynone"><%= line.skill %></span></td></tr>
   <tr><th colspan="3">説明</th></tr>
   <tr><td colspan="3"><span class="displaynone"><%= line.desc %></span></td></tr>
    </table>
  </div>
    <% })%>
</div>
</script>


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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/11/22 05:27

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

    キャンセル

  • toramo

    2018/11/23 14:16

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

    キャンセル

回答 1

checkベストアンサー

+1

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

<style>
[name=age]{display:none;}
[name=age]+span{color:black;}
[name=age]:checked+span{color:gray;}
#name{color:blue;}
</style>
<script>
$(function() {
    var list = [
      { age:"20",name:"name_001",chara:"A",skill:"skill_001",desc:"desc_001"},
      { age:"20",name:"name_002",chara:"B",skill:"skill_002",desc:"desc_002"},
      { age:"20",name:"name_003",chara:"C",skill:"skill_003",desc:"desc_003"},
      { age:"20",name:"name_004",chara:"B",skill:"skill_004",desc:"desc_004"},
      { age:"20",name:"name_005",chara:"A",skill:"skill_005",desc:"desc_005"},
      { age:"20",name:"name_006",chara:"D",skill:"skill_006",desc:"desc_006"},
      { age:"20",name:"name_007",chara:"A",skill:"skill_007",desc:"desc_007"},
      { age:"30",name:"name_008",chara:"B",skill:"skill_008",desc:"desc_008"},
      { age:"40",name:"name_009",chara:"B",skill:"skill_009",desc:"desc_009"},
      ];
  $('[name=age]').on('change',function(){
    var l2=list.filter(function(x){
      return x.age==$('[name=age]:checked').val();
    }).map(function(x){
      return x.name;
    });
    $('#name').html(l2.join(' '));
  });
});

</script>

<div id="age">
<label><input type="radio" name="age" value="20"><span>20代</span></label> |
<label><input type="radio" name="age" value="30"><span>30代</span></label> |
<label><input type="radio" name="age" value="40"><span>40代</span></label> |
<label><input type="radio" name="age" value="50"><span>50代</span></label>
</div>
<div id="name"></div>


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/02 01:01

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

    キャンセル

  • 2018/12/02 01:05

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

    キャンセル

  • 2018/12/03 11:33

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.57%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る