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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

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

JavaScript

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

HTML

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

Q&A

解決済

1回答

277閲覧

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

MeB

総合スコア104

JSON

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

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2018/07/13 06:21

編集2018/07/13 08:01

前提・実現したいこと

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

該当のソースコード

json

1{ 2 "test":[ 3 { 4 "id": 1, 5 "type":"aaa", 6 "color":"red" 7 }, 8 { 9 "id": 2, 10 "type":"aaa", 11 "color":"blue" 12 }, 13 { 14 "id": 3, 15 "type":"bbb", 16 "color":"blue" 17 }, 18 { 19 "id": 4, 20 "type":"ccc", 21 "color":"blue" 22 }, 23 { 24 "id": 5, 25 "type":"ccc", 26 "color":"green" 27 } 28 ] 29}

js

1var query = $('input:checked').map(function(){ 2 var element = ($(this).attr('name')).replace('[]',''); 3 var obj = {}; 4 obj[element] = $(this).val(); 5 return obj; 6 }).get(); 7 8 //htmlのformからチェックされたnameとvalueがqueryに入ります。 9 query = Object.assign(query['0'],query['1']); 10 11 console.log(query); // 例:{"type":"aaa", "color":"green"} 12 13 // underscore.js 14 var results = _.where(dataArray, query);

上記の

js

1 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からデータを持って来ています。

html

1<form id="form" name="search" action=""> 2 <div class="searchRow methodRow"> 3 <p>タイプ</p> 4 <div class="searchContent"> 5 <input type="checkbox" id="type01" name="type[]" value="aaa"><label for="type01">aaa</label> 6 <input type="checkbox" id="type02" name="type[]" value="bbb"><label for="type02">bbb</label> 7 <input type="checkbox" id="type02" name="type[]" value="ccc"><label for="type02">ccc</label> 8 </div> 9 </div> 10 <div class="searchRow rateRow"> 11 <p></p> 12 <div class="searchContent"> 13 <input type="checkbox" id="color01" name="color[]" value="red"><label for="color01"></label> 14 <input type="checkbox" id="color02" name="color[]" value="blue"><label for="color02"></label> 15 <input type="checkbox" id="color03" name="color[]" value="green"><label for="color03"></label> 16 </div> 17 </div> 18 <button class="submit" value="検索">検索</button> 19 <input type="hidden" name="search_submit" value="1"> 20 </form>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こういうことですか?

javascript

1var a={ 2 "test":[ 3 { 4 "id": 1, 5 "type":"aaa", 6 "color":"red" 7 }, 8 { 9 "id": 2, 10 "type":"aaa", 11 "color":"blue" 12 }, 13 { 14 "id": 3, 15 "type":"bbb", 16 "color":"blue" 17 }, 18 { 19 "id": 4, 20 "type":"ccc", 21 "color":"blue" 22 }, 23 { 24 "id": 5, 25 "type":"ccc", 26 "color":"green" 27 } 28 ] 29}; 30 31var b={}; 32b.test=a.test.filter(function(x){ 33 return x.type=="aaa" || x.color=="green"; 34}); 35console.log(b); 36 37

sample

javascript

1$(function(){ 2 var a={ 3 "test":[ 4 {"id": 1,"type":"aaa","color":"red"}, 5 {"id": 2,"type":"aaa","color":"blue"}, 6 {"id": 3,"type":"bbb","color":"blue"}, 7 {"id": 4,"type":"ccc","color":"blue"}, 8 {"id": 5,"type":"ccc","color":"green"}, 9 ], 10 }; 11 var b={}; 12 $('#form').on('submit',function(e){ 13 e.preventDefault(); 14 var vals_type=$(this).find('[name="type[]"]:checked').map(function(x){ 15 return $(this).val(); 16 }); 17 var vals_color=$(this).find('[name="color[]"]:checked').map(function(x){ 18 return $(this).val(); 19 }); 20 b.test=a.test.filter(function(x){ 21 return $.inArray(x.type,vals_type)>=0 || $.inArray(x.color,vals_color)>=0; 22 }); 23 console.log(b); 24 }); 25});

HTML

1<form id="form"> 2<div class="searchRow methodRow"> 3<p>タイプ</p> 4<div class="searchContent"> 5<input type="checkbox" id="type01" name="type[]" value="aaa"><label for="type01">aaa</label> 6<input type="checkbox" id="type02" name="type[]" value="bbb"><label for="type02">bbb</label> 7<input type="checkbox" id="type02" name="type[]" value="ccc"><label for="type02">ccc</label> 8</div> 9</div> 10<div class="searchRow rateRow"> 11<p>色</p> 12<div class="searchContent"> 13<input type="checkbox" id="color01" name="color[]" value="red"><label for="color01">赤</label> 14<input type="checkbox" id="color02" name="color[]" value="blue"><label for="color02">青</label> 15<input type="checkbox" id="color03" name="color[]" value="green"><label for="color03">緑</label> 16</div> 17</div> 18<button class="submit" value="検索">検索</button> 19<input type="hidden" name="search_submit" value="1"> 20</form>

JSONパースした場合

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

javascript

1$(function(){ 2 var a=JSON.parse(`{ 3 "test":[ 4 {"id": 1,"type":"aaa","color":"red"}, 5 {"id": 2,"type":"aaa","color":"blue"}, 6 {"id": 3,"type":"bbb","color":"blue"}, 7 {"id": 4,"type":"ccc","color":"blue"}, 8 {"id": 5,"type":"ccc","color":"green"} 9 ] 10 }`); 11 console.log(a); // とりあえず確認 12 var b={}; 13 $('#form').on('submit',function(e){ 14 e.preventDefault(); 15 var vals_type=$(this).find('[name="type[]"]:checked').map(function(x){ 16 return $(this).val(); 17 }); 18 var vals_color=$(this).find('[name="color[]"]:checked').map(function(x){ 19 return $(this).val(); 20 }); 21 b.test=a.test.filter(function(x){ 22 return $.inArray(x.type,vals_type)>=0 || $.inArray(x.color,vals_color)>=0; 23 }); 24 console.log(a); // 検索後確認 25 console.log(b); // 結果確認 26 }); 27});

投稿2018/07/13 06:31

編集2018/07/13 09:49
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MeB

2018/07/13 07:32

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

2018/07/13 07:33

formのサンプルをください
MeB

2018/07/13 07:45

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

2018/07/13 08:01

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

2018/07/13 08:40

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

2018/07/13 08:59 編集

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

2018/07/13 08:59 編集

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

2018/07/13 09:00

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

2018/07/13 09:29 編集

ありがとうございます。 コンソール内で確認できました。 ちょっと気になったのですがコンソールで見た際に デフォルトでは最初から全データを表示させているのですが、 その場合は (5) [{…}, {…}, {…}, {…}, {…}] となっています。 検索をした後は {dataArray: Array(5)} となっています。 上記の(5) [{…}, {…}, {…}, {…}, {…}]とは別の値の取得方法になるのでしょうか? 最初に全データ表示させているときは jQuery.each(results, function() { this.type }); のようにしているため表示方法を合わせたいです。 なんどもすみません。宜しくお願いします。
yambejp

2018/07/13 09:42

ん~、ちょっと状況が把握できません 基本的には問題ないと思いますが、 jsonデータをparseして使っているとかでしょうか? ブラウザの環境なども追記された方がよいかも (ああ。もう3連休前の週末なのでしばらく返信できないかも・・・)
MeB

2018/07/13 10:28

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問