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

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

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

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

JavaScript

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

Underscore.js

Underscore.jsは、JavaScriptのためのユーティリティライブラリです。JavaScriptの関数・配列、オブジェクトを扱う際に度々発生する処理がメソッドとしてまとめられています。他のライブラリに依存しないため、稼働中のアプリケーションにも導入可能です。

Q&A

解決済

2回答

2745閲覧

underscore.jsの_.where()で同じキーで異なる値の場合に取得できない

MeB

総合スコア104

JSON

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

JavaScript

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

Underscore.js

Underscore.jsは、JavaScriptのためのユーティリティライブラリです。JavaScriptの関数・配列、オブジェクトを扱う際に度々発生する処理がメソッドとしてまとめられています。他のライブラリに依存しないため、稼働中のアプリケーションにも導入可能です。

0グッド

1クリップ

投稿2018/07/25 01:52

編集2018/07/25 01:54

前提・実現したいこと

_.where()で同じキーで異なる値を設定したいです。
どのような形が正解なのでわかってはいませんが、

js

1var results = _.where(dataArray, [{type: "1"},{color: "red"},{color: "blue"}]); //この形ではうまく取れませんでした。

イメージは上記のような感じです。
dataArrayの中はjsonファイルになります。(下記の参照をお願いします。)

試したこと

json

1{ 2 "test":[ 3 { 4 "name":"aaa", 5 "type":"1", 6 "color":"red" 7 }, 8 { 9 "name":"bbb", 10 "type":"1", 11 "color":"blue" 12 }, 13 { 14 "name":"ccc", 15 "type":"2", 16 "color":"blue" 17 },

js

1//試したもの その1 2var results = _.where(dataArray, [{type: "1"},{color: "red"},{color: "blue"}]); //何も取れない 3 4//試したもの その2 5var results = _.where(dataArray, {type: "1"},{color: "red"},{color: "blue"}); //type: "1"しか反映されない(nameでいうとaaaとbbbのみ取り出せる 6 7//試したもの その3 8var results = _.where(dataArray, {type: "1",color: ["red","blue"]}); //何も取れない

他にも試していますが、どのように取るのが正しいのでしょうか?
ご教示をよろしくお願いします。

underscore.jsはこだわっている訳ではないのでjsで普通にこう書いたらいいというものでも問題ありません。

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

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

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

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

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

guest

回答2

0

ベストアンサー

_.where完全一致専用ですので、それより複雑な条件を与えるなら、Array.prototype.filterMDN)で条件を自力判定するのがいいかなと思います。IEでも9からあります。

javascript

1var results = dataArray.filter(function(item){ 2 return item.type === '1' && (item.color === 'red' || item.color === 'blue'); 3});

投稿2018/07/25 02:01

maisumakun

総合スコア145121

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

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

0

以前したhttps://teratail.com/questions/135923の質問と似通っていますね。

まず_.where_.filterの下位互換なので一旦忘れてください。
機能を絞った関数で「こういうケースに対応出来ないじゃないか!」と騒いでるようなものです。
_.filterの使い方を完全にマスターしてから、より簡素な記述で書ける_.whereを別途検討する流れです。

そして_.chain構文を使いましょう。
またfilterはtrue or falseで返す関数を大量に用意することになるので、アロー関数を利用するとスマートに書けるでしょう。

JavaScript

1// chain+filterを使って書く 2var results = _.chain(dataArray) 3 .filter(it => it.type === "1") 4 .filter(it => it.color === "red" || it.color === "blue") 5 .value(); 6 7// type一致に関してはwhereで書き直す 8var results = _.chain(dataArray) 9 .where({type: "1"}) 10 .filter(it => it.color === "red" || it.color === "blue") 11 .value(); 12 13// Array.prototype.includesを検討する 14var results = _.chain(dataArray) 15 .where({type: "1"}) 16 .filter(it => ["red", "blue"].includes(it.color)) 17 .value(); 18 19// whereやfilterを2回通すとパフォーマンスが気になるので一気に書く 20// (色々書き方はあるけど読みづらいか?) 21var results = _.filter(dataArray, it => { 22 if (it.type !== "1") return false; 23 return ["red", "blue"].includes(it.color); 24}); 25 26// filter1個で頑張るならネイティブJSに用意されているfilterでええやん 27var results = dataArray.filter(it => { 28 if (it.type !== "1") return false; 29 return ["red", "blue"].includes(it.color); 30});

_.chain構文を使う上で計算途中の結果が取得したい時もあるでしょう。
その時はよりスマートかつ高パフォーマンスに期待値を得たいの私の回答を参考にしてください。
UnderscoreではなくLodashというライブラリの解説ですが、そもそもの思想も使える関数もほぼ同じです。

Undescoreも_.chainと_.tapは存在するので同じ様に動作してくれるはずです。

投稿2018/07/25 04:49

miyabi-sun

総合スコア21158

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

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

MeB

2018/07/25 05:51

ご回答ありがとうございます。 こんなに色々あるのですね…勉強になります。 すみません。加えての質問なのですが、 上記のように取る場合はformのvalueはどのような形なのでしょうか? 今は1つのvalueの中に複数の値を入れることを想定しています。 例:value="red,blue"
miyabi-sun

2018/07/25 05:58

formのvalue……? この文脈だと意味がよくわかりませんが、HTMLで書いたform要素のvalueですか? それともdataArrayを"red,blue"という文字列に加工したいという要望ですか?
MeB

2018/07/25 07:35 編集

すみません。言葉が足りませんでした。 >HTMLで書いたform要素のvalue です。 もともとはformから値を取ってjsonのデータにヒットしてあるものを表示というものなのですが、 教えていただいたコードを使うとしたらHTMLで書いたform要素のvalueはどのような形が適切なのでしょうか? 1つのinputのvalueに値が複数ある場合です。 現在は下記で回答をいただいたもの使用しています。 https://teratail.com/questions/137605
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問