JavaScriptの二元連想配列の要素の中で条件に合う要素だけを抽出して新たな連想配列を作りたい。

Question

filterメソッド的なの機能を連想配列に対して行いたいのですがなかなか解決策が見つけ出せないでいます。
なにかヒント頂けると幸いです。
よろしくお願いします。

下記のような連想配列があった時に

const obj = 
      {
  103: {id: 103, task: "タスク１", created_at: "2020", updated_at: "2020-06-09", completed: false},
  104: {id: 104, task: "タスク２", created_at: "2020", updated_at: "2020-06-09", completed: true},
  105: {id: 105, task: "タスク３", created_at: "2020", updated_at: "2020-06-09", completed: false}
      }

以下のように、completedがtrueであるものだけ抽出したいです。

{  104: {id: 104, task: "タスク２", created_at: "2020", updated_at: "2020-06-09", completed: true} }

Comments

[yambejp]

なにが条件でしょう？completedがtrueをぬきだしたい？
なおjsの{}はイテラブルではありませんが大丈夫ですか？

[kinoko8800]

申し訳ありません。理解不足でした。
completed:true　であるオブジェクトを抜き出したいです

Answer 1

いったんObject.entries()で分解してからフィルターし、再度Object.fromEntries()で組み立てるのはどうでしょうか。

const entries = Object.entries(obj).filter(([k, v]) => v.completed);
const obj2 = Object.fromEntries(entries);

• Object.entries() - JavaScript | MDN
• Object.fromEntries() - JavaScript | MDN

Comments

[kinoko8800]

ご回答ありがとうございます。
このようなやり方もあるんですね！
実際に動かして試してみます！

Answer 2

こんにちは。lodash の _.pickBy を使うと簡単です。

_.pickBy(obj, 'completed')

• 動作確認用サンプル： https://codepen.io/jun68ykt/pen/XWXXRLw?editors=0012

Comments

[kinoko8800]

回答ありがとうございます！
期待する動作を実現できました！
ただ第二引数の"completed" ですが、completedのfalse を抜き出したいとなったときはどうなるんですか？

[jun68ykt]

コメントありがとうございます。

_.pickBy(obj, 'completed')

をもう少し丁寧に書くと、

const obj2 = _.pickBy(obj, e => e.completed)

https://codepen.io/jun68ykt/pen/gOPPRNd?editors=0012

です。上記の

const obj2 = _.pickBy(obj, e => e.completed)

をはしょって、回答に書いたように

const obj2 = _.pickBy(obj, 'completed')

と書けるのは、lodash が（いわば）気を利かせてくれて、第２引数の文字列、'completed'　を
「オブジェクトに含まれる各プロパティの値の completed プロパティの値が truthy である」
という条件に読み替えてくれるからです。

もし、completed が false のものだけ pick したいときは、このような短い書き方はできないので、

const obj2 = _.pickBy(obj, e => !e.completed)

https://codepen.io/jun68ykt/pen/mdVVwNj?editors=0012

と、関数「e => !e.completed」を第２引数に渡す必要があります。

第２引数に与える関数を、いろいろ変えれば
「created_at が今日を含む一週間以内のもの」
とか、
「id が100以上200未満のもの」
といった条件でも取り出せます。

[kinoko8800]

ご丁寧にありがとうございます！
調べても詳しい説明が見つけられず困惑していましたが、
おかげさまで疑問が完璧に解けました！
本当に感謝です！

[jun68ykt]

どういたしまして????
> おかげさまで疑問が完璧に解けました！
とのことでよかったです????

Answer 3

ちょっと雑ですが・・・

var res={};
Object.entries(obj).filter(x=>x[1].completed).forEach(x=>res[x[0]]=x[1]);
console.log(res);

Comments

[kinoko8800]

ご回答ありがとうございます！
こちらも動かして試してみます！