-4

javascript:

data=[
            {"number":"4","shot":"3P","result":"成功"},
            {"number":"5","shot":"2P","result":"失敗"},
            {"number":"6","shot":"2P","result":"成功"},
            {"number":"7","shot":"3P","result":"失敗"},
            {"number":"8","shot":"3P","result":"成功"},
            {"number":"4","shot":"2P","result":"失敗"},
            {"number":"5","shot":"3P","result":"失敗"},
            {"number":"6","shot":"2P","result":"成功"},
            {"number":"7","shot":"2P","result":"失敗"},
            {"number":"8","shot":"3P","result":"成功"}
        ]; 

html:

<form>
<p>選手<br>
<input type="checkbox" name="q1" value="4番"> 4番
<input type="checkbox" name="q1" value="5番"> 5番
<input type="checkbox" name="q1" value="6番"> 6番
<input type="checkbox" name="q1" value="7番"> 7番
<input type="checkbox" name="q1" value="8番"> 8番
</p>

<p>シュート<br>
<input type="checkbox" name="q2" value="2P"> 2P
<input type="checkbox" name="q2" value="3P"> 3P
</p>

<p>結果<br>
<input type="checkbox" name="q3" value="成功"> 成功
<input type="checkbox" name="q3" value="失敗"> 失敗
</p>

<p><input type="submit" value="検索"></p>
</form>

このdataという名前の変数にいれたオブジェクトの配列から、例えば"4"の情報だけを取ってくるプログラムをつくりたいです。チェックボックスで"4"を選択すると「"3P","成功"」、「"2P","失敗"」をアラートか何かで表示させたいです。さらに"4","3P"をチェックすると「"成功"」を表示させたいです。jqueryの.filter()を使ってフィルタリング出来ればいいなと思っています。またとてもシンプルなプログラムで教えて頂けたら幸いです。どなたかご教授よろしくお願いします。

2
  • FYI : jqueryの.filter()、配列のフィルタを行うのはjQuery.grep です。filterは要素集合に対して行います。また、javascript自体にArray.prototype.filterがあります。
    – BLUEPIXY
    2016年8月26日 8:17
  • テーブルを作成して、jQuery Simple Table Filter のような既に誰かが作っているテーブルフィルタプラグインを利用するのが簡単(自分で書くコードも少ない)かと思います。
    – BLUEPIXY
    2016年8月26日 8:33

1 件の回答 1

1

コメントにありますように、Array.prototype.filter を使用すると簡単に実装が可能です。

以下にスニペットを作成してみましたので、よろしければご確認下さい。
見難くてゴメンナサイ。。。

$(function() {

  // データ用配列 ※見やすさのためソートしてます
  var data = [
    {"number" : "4" , "shot" : "2" , "result" : "失敗"} ,
    {"number" : "4" , "shot" : "3" , "result" : "成功"} ,
    {"number" : "5" , "shot" : "2" , "result" : "失敗"} ,
    {"number" : "5" , "shot" : "3" , "result" : "失敗"} ,
    {"number" : "6" , "shot" : "2" , "result" : "失敗"} ,
    {"number" : "6" , "shot" : "2" , "result" : "成功"} ,
    {"number" : "7" , "shot" : "2" , "result" : "失敗"} ,
    {"number" : "7" , "shot" : "3" , "result" : "失敗"} ,
    {"number" : "8" , "shot" : "3" , "result" : "失敗"} ,
    {"number" : "8" , "shot" : "3" , "result" : "成功"} ,
  ];

  $("form").submit(function(e){
    e.preventDefault();

    var q1 = []; // 選手     選択状態格納用配列
    var q2 = []; // シュート        ``
    var q3 = []; // 結果            ``

    // 選手の選択状態を取得
    $("[name=q1]:checked").each(function() {
      q1.push($(this).val());
    });

    // 点数の選択状態を取得
    $("[name=q2]:checked").each(function() {
      q2.push($(this).val());
    });

    // 結果の選択状態を取得
    $("[name=q3]:checked").each(function() {
      q3.push($(this).val());
    });

    // 検索
    var filteredData = data.filter(function(element) {
      if (q1.length === 0) return true;
      return (q1.indexOf(element.number) >= 0);
    }).filter(function(element){
      if (q2.length !== 1) return true;
      return (q2.indexOf(element.shot) >= 0);
    }).filter(function(element){
      if (q3.length !== 1) return true;
      return (q3.indexOf(element.result) >= 0);
    });
    alert(JSON.stringify(filteredData));

    // フォームリセット
    $("form")[0].reset();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>選手<br>
  <input type="checkbox" name="q1" value="4"> 4番
  <input type="checkbox" name="q1" value="5"> 5番
  <input type="checkbox" name="q1" value="6"> 6番
  <input type="checkbox" name="q1" value="7"> 7番
  <input type="checkbox" name="q1" value="8"> 8番
  </p>

  <p>シュート<br>
  <input type="checkbox" name="q2" value="2"> 2P
  <input type="checkbox" name="q2" value="3"> 3P
  </p>

  <p>結果<br>
  <input type="checkbox" name="q3" value="成功"> 成功
  <input type="checkbox" name="q3" value="失敗"> 失敗
  </p>

  <p><input type="submit" value="検索"></p>
</form>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。