objectのマージの仕方を教えてください！

Question

前提・実現したいこと

react.js redux でアプリを作っています。
reducer内でオブジェクトを配列のオブジェクトで返したいです。

コード

// やりたい事　　a = {key...} b = {value...} >>>>  [{key:value}]
const result = Object.keys(payload).map(key => {
        const value = payload[key]
        console.log({ key }) // 表示される値{key: "id"}...
        console.log({ value }) // 表示される値{value: 1}...
         //return hoge
      })

　

map関数内でのkeyオブジェクトとvalueオブジェクトのマージ

今、個々にオブジェクトとして、mapで回されているものを[ { key: value } ]の配列オブジェクトとして、返したいです。

試したこと

const result = Object.keys(payload).map(key => {
        const value = payload[key]
       ///// console.log({ key }) // {key: "id"}
       ///// console.log({ value }) //  {value: 1}
        value['id'] = key
        return value
      })

Uncaught TypeError: Cannot create property 'id' on number '1'

上記のエラーについても分からなかったです。
指定したkey,valueになるようなオブジェクトのマージの仕方が先決です。

よろしくお願いします。

Answer 1

ちょっと具体的に何をどうしたかわからないのですが
普通ObjectのマージといえばObject.assignしますね

var a={x:1,y:2};
var b={x:10,z:30};
var c=Object.assign(a,b);
console.log(c);//{x:10,y:2,z:30}

Answer 2

こんにちは。以下でどうでしょう？

const result = Object.entries(payload).map(([k, v]) => ({ [k]: v }));

• 動作確認用サンプル： https://codepen.io/jun68ykt/pen/rNxYVjY

追記

map に渡す関数に、{ [k]: v } というオブジェクト自体ではなく、このようなオブジェクトを要素として持つ、長さ1の配列を返させたいのであれば、以下です。

const result = Object.entries(payload).map(([k, v]) => [{ [k]: v }]);

• 動作確認用サンプル： https://codepen.io/jun68ykt/pen/ZEQaOwN

Comments

[dev_shts]

サンプルまで、ご丁寧にありがとうございます。

私の質問の仕方、情報が間違えておりました、、
記述不足なのですが

```
//やりたいこと

a = {key...} b = {value...} >>>> [ { key : value } ]

ではなく

a = {key...} b = {value...} >>>> [ { key : value , key: value , key: value...} ]

```

でした、、本当に申し訳ないです。
もしよろしければ、お力添えいただければ幸いです。

[jun68ykt]

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

> //やりたいこと

としては、

> a = {key...} b = {value...} >>>> [ { key : value } ]
> ではなく
> a = {key...} b = {value...} >>>> [ { key : value , key: value , key: value...} ]

ということだったんですね。念のため確認させてほしいのですが、それだと変数 payload に、例えば、

{ id: 1, name: 'hello', value: 999 }

というオブジェクトが入っていた場合、 result としては、どのようなオブジェクトまたは配列が入ってくるのが望ましい結果になりますでしょうか？

[dev_shts]

返答ありがとうございます。
payload = { id: 1, name: 'hello', value: 999 }
の時は
[ 0 : { id: 1, name: 'hello', value: 999 } ]
が返る様な形にしたいです。

[jun68ykt]

なるほどです。
つまり、得たい result は、要素を1個含む配列で、その1個の要素が payloadと同じ内容のオブジェクトということでしょうか？

もしそうであれば、以下で得られます。

const result = [{ ...payload }];

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

[dev_shts]

そうです。解決しました！
ありがとうございました！！

[jun68ykt]

どういたしまして????
> 解決しました！
とのことでよかったです????