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

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

ただいまの
回答率

90.51%

  • JavaScript

    16428questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8973questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • JSON

    1152questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

jsonファイルのデータでkeyが1つでも当てはまっていれば全て取得したい

解決済

回答 1

投稿 編集

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

MeB

score 87

 前提・実現したいこと

jsonファイルがあってそこから
同じキーで異なる値を指定した場合でも
全て取得したい。

 該当のソースコード

{
  "test":[
    {
      "id": 1,
      "type":"aaa",
      "color":"red"
    },
    {
      "id": 2,
      "type":"aaa",
      "color":"blue"
    },
    {
      "id": 3,
      "type":"bbb",
      "color":"blue"
    },
    {
      "id": 4,
      "type":"ccc",
      "color":"blue"
    },
    {
      "id": 5,
      "type":"ccc",
      "color":"green"
    }
  ]
}
var query = $('input:checked').map(function(){
          var element = ($(this).attr('name')).replace('[]','');
          var obj = {};
          obj[element] = $(this).val();
          return obj;
        }).get();

       //htmlのformからチェックされたnameとvalueがqueryに入ります。
        query = Object.assign(query['0'],query['1']);

        console.log(query); // 例:{"type":"aaa", "color":"green"}

       // underscore.js
        var results = _.where(dataArray, query);


上記の

 console.log(query); // 例:{"type":"aaa", "color":"green"}


ですと現在は、"type":"aaa"と"color":"green"を満たしているものがないため何も表示されません

しかし実現したいことは上記の例で

{"id": 1,"type":"aaa","color":"red"},{"id": 2,"type":"aaa","color":"blue"},{"id": 5,"type":"ccc","color":"green"}

が帰ってくるようにしたいです。
そもそも同じーキーで違う値を分けることは可能なのでしょうか?
宜しくお願いします。

追記
ajaxでjsonからデータを持って来ています。

<form id="form" name="search" action="">
                <div class="searchRow methodRow">
                  <p>タイプ</p>
                  <div class="searchContent">
                    <input type="checkbox" id="type01" name="type[]" value="aaa"><label for="type01">aaa</label>
                    <input type="checkbox" id="type02" name="type[]" value="bbb"><label for="type02">bbb</label>
                    <input type="checkbox" id="type02" name="type[]" value="ccc"><label for="type02">ccc</label>
                  </div>
                </div>
                <div class="searchRow rateRow">
                  <p></p>
                  <div class="searchContent">
                    <input type="checkbox" id="color01" name="color[]" value="red"><label for="color01"></label>
                    <input type="checkbox" id="color02" name="color[]" value="blue"><label for="color02"></label>
                    <input type="checkbox" id="color03" name="color[]" value="green"><label for="color03"></label>
                  </div>
                </div>
                <button class="submit" value="検索">検索</button>
                <input type="hidden" name="search_submit" value="1">
              </form>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+3

こういうことですか?

var a={
  "test":[
    {
      "id": 1,
      "type":"aaa",
      "color":"red"
    },
    {
      "id": 2,
      "type":"aaa",
      "color":"blue"
    },
    {
      "id": 3,
      "type":"bbb",
      "color":"blue"
    },
    {
      "id": 4,
      "type":"ccc",
      "color":"blue"
    },
    {
      "id": 5,
      "type":"ccc",
      "color":"green"
    }
  ]
};

var b={};
b.test=a.test.filter(function(x){
  return x.type=="aaa" || x.color=="green";
});
console.log(b);

 sample

$(function(){
  var a={
    "test":[
      {"id": 1,"type":"aaa","color":"red"},
      {"id": 2,"type":"aaa","color":"blue"},
      {"id": 3,"type":"bbb","color":"blue"},
      {"id": 4,"type":"ccc","color":"blue"},
      {"id": 5,"type":"ccc","color":"green"},
      ],
  };
  var b={};
  $('#form').on('submit',function(e){
    e.preventDefault();
    var vals_type=$(this).find('[name="type[]"]:checked').map(function(x){
      return $(this).val();
    });
    var vals_color=$(this).find('[name="color[]"]:checked').map(function(x){
      return $(this).val();
    });
    b.test=a.test.filter(function(x){
      return $.inArray(x.type,vals_type)>=0 || $.inArray(x.color,vals_color)>=0;
    });
    console.log(b);
  });
});
<form id="form">
<div class="searchRow methodRow">
<p>タイプ</p>
<div class="searchContent">
<input type="checkbox" id="type01" name="type[]" value="aaa"><label for="type01">aaa</label>
<input type="checkbox" id="type02" name="type[]" value="bbb"><label for="type02">bbb</label>
<input type="checkbox" id="type02" name="type[]" value="ccc"><label for="type02">ccc</label>
</div>
</div>
<div class="searchRow rateRow">
<p></p>
<div class="searchContent">
<input type="checkbox" id="color01" name="color[]" value="red"><label for="color01"></label>
<input type="checkbox" id="color02" name="color[]" value="blue"><label for="color02"></label>
<input type="checkbox" id="color03" name="color[]" value="green"><label for="color03"></label>
</div>
</div>
<button class="submit" value="検索">検索</button>
<input type="hidden" name="search_submit" value="1">
</form>

 JSONパースした場合

とくに違いは見えませんが・・

$(function(){
  var a=JSON.parse(`{
    "test":[
      {"id": 1,"type":"aaa","color":"red"},
      {"id": 2,"type":"aaa","color":"blue"},
      {"id": 3,"type":"bbb","color":"blue"},
      {"id": 4,"type":"ccc","color":"blue"},
      {"id": 5,"type":"ccc","color":"green"}
      ]
  }`);
  console.log(a); // とりあえず確認
  var b={};
  $('#form').on('submit',function(e){
    e.preventDefault();
    var vals_type=$(this).find('[name="type[]"]:checked').map(function(x){
      return $(this).val();
    });
    var vals_color=$(this).find('[name="color[]"]:checked').map(function(x){
      return $(this).val();
    });
    b.test=a.test.filter(function(x){
      return $.inArray(x.type,vals_type)>=0 || $.inArray(x.color,vals_color)>=0;
    });
    console.log(a); // 検索後確認
    console.log(b); // 結果確認
  });
});

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/13 16:32

    回答ありがとうございます。
    こんなに短くかけるのですね…。
    重ねての質問なのですが、
    return x.type=="aaa" || x.color=="green";
    この部分はformでcheckされた下記のような感じに書くことも可能なのでしょうか?
    x."name"=="value" || x."name"=="value";

    キャンセル

  • 2018/07/13 16:33

    formのサンプルをください

    キャンセル

  • 2018/07/13 16:45

    失礼しました。
    追記いたします。

    キャンセル

  • 2018/07/13 17:01

    すみません。checkboxがradioになっていたので修正しています。

    キャンセル

  • 2018/07/13 17:40

    checkboxということはtypeの場合、aaaとbbbがチェックされていたら
    検索するイメージですか?

    キャンセル

  • 2018/07/13 17:58 編集

    はい。
    aaaとbbbがチェックされていた場合は、
    {"id": 1,"type":"aaa","color":"red"},{"id": 2,"type":"aaa","color":"blue"},{"id": 3,"type":"bbb","color":"blue"}
    が表示されるイメージです。(難度も修正すみません。)

    キャンセル

  • 2018/07/13 17:59 編集

    type内でor検索でさらにtypeとcolorでor検索なのですね?
    sample追記しておきます

    キャンセル

  • 2018/07/13 18:00

    >type内でor検索でさらにtypeとcolorでor検索
    はい。おっしゃる通りです。

    キャンセル

  • 2018/07/13 18:28 編集

    ありがとうございます。
    コンソール内で確認できました。

    ちょっと気になったのですがコンソールで見た際に
    デフォルトでは最初から全データを表示させているのですが、
    その場合は
    (5) [{…}, {…}, {…}, {…}, {…}]
    となっています。
    検索をした後は
    {dataArray: Array(5)}
    となっています。

    上記の(5) [{…}, {…}, {…}, {…}, {…}]とは別の値の取得方法になるのでしょうか?
    最初に全データ表示させているときは
    jQuery.each(results, function() {
    this.type
    });
    のようにしているため表示方法を合わせたいです。
    なんどもすみません。宜しくお願いします。

    キャンセル

  • 2018/07/13 18:42

    ん~、ちょっと状況が把握できません
    基本的には問題ないと思いますが、
    jsonデータをparseして使っているとかでしょうか?
    ブラウザの環境なども追記された方がよいかも

    (ああ。もう3連休前の週末なのでしばらく返信できないかも・・・)

    キャンセル

  • 2018/07/13 19:28

    すみません。できました!
    本当にありがとうございます!
    三連休楽しんでください!私もひと段落ついたので満喫します!
    本当にいつもありがとうございます!!!!

    キャンセル

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

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

関連した質問

  • 解決済

    Textarea内の文字色を自由に変更できるようにしたいです!

    こんにちは、プログラミング初心者です。 現在Monaca(Javascript+HTML5のアプリ開発プラットフォーム)の無料版、ベーシックプランで初めてのアプリ開発をしています。

  • 解決済

    formの選択をプルダウン以外で作成したい。

    formでInput画面を作っています。 selectのタグを使うとプルダウンになりますね。 これを、例えば↓のように4つの文字列のどれかをクリックすることによりそこが選択されるよ

  • 解決済

    チェックボックスとラベルを装飾したい

    前提・実現したいこと CSSを使って、隠しチェックボックスがチェックされるとメニューが表示されるようにしています。 (実際は抜粋部分以外に10個くらい同じようなものが並んでいます)

  • 解決済

    jQueryの絞り込み検索(3つの条件 or検索)について

     前提・実現したいこと 画像を3つの条件(or検索)で表示したいと思っています。 2つの条件検索(#styleと#color)では問題なかったコードに、1つ条件(#size)を

  • 解決済

    複雑なチェックボックスの条件分岐

    目的 チェックボックスの切替をしたいのですが、複数の条件がぶつかってしまい、どうしてもうまくいきません。 次のHTMLで、「チェックが入った色を持つ果物を表示したい。」というの

  • 解決済

    1つ目と2つ目のチェックで、別の挙動をさせる方法

    ■目的 下記HTMLのようなチェックボックスがあるとき、 1つ目のチェック画像を、『1つだけ』ピンクの中にクローン 2つ目のチェック画像を、『1つだけ』水色の中にクロ

  • 解決済

    jQueryでformの値を取得したい

    サイトに絞り込みとソート機能を実装しようと考えています。 具体的には、 checkboxにチェックが入っているものを表示し、 複数ある場合は値が大きい方を上に表示する感じになり

  • 解決済

    jsで返り値をまとめたい

     前提・実現したいこと queryを {色:"1",旬:"2"} のような形にしたいです。 <form id="form" name="search" action="">

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

  • JavaScript

    16428questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8973questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • JSON

    1152questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。