オブジェクトの配列にプロパティを追加する


110

以下に示すようなオブジェクトの配列があります

Object {Results:Array[2]}
     Results:Array[2]
[0-1]
0:Object
       id=1     
       name: "Rick"
1:Object
       id=2     
       name:'david'

このオブジェクトの配列の各要素に、Activeという名前のプロパティをもう1つ追加したいと思います。

最終的な結果は次のようになります。

Object {Results:Array[2]}
     Results:Array[2]
[0-1]
0:Object
       id=1     
       name: "Rick"
       Active: "false"
1:Object
       id=2     
       name:'david'
       Active: "false"

誰かがこれを達成する方法を教えてもらえますか?


6
配列をループします。ループ中に各配列要素にプロパティを追加します。どの部分を行うかわからないのですか?
JJJ 2016

回答:


156

このforEachメソッドを使用して、配列内の要素ごとに提供された関数を1回実行できます。この提供された関数では、Activeプロパティを要素に追加できます。

Results.forEach(function (element) {
  element.Active = "false";
});

220

または使用する map

Results.map(obj=> ({ ...obj, Active: 'false' }))

@adrianolskによるコメントを反映するように編集され、元のオブジェクトを変更せず、代わりにそれぞれに新しいオブジェクトを返します。

仕様を読む


4
ES6でのみサポート
Amaynut 2018年

5
ES5正確には;) -しかし、バベルは喜んでそれを逆コンパイルします
sidonaldson

51
mapは、オブジェクトを変更せずに新しい配列を返す必要があります。この場合はforEachの方が適しているか、mapを使用して新しいオブジェクトを返しますResults.map(obj=> ({ ...obj, Active : 'false' }))
adrianolsk 2018

4
素晴らしい解決策@adrianolsk、別の回答として提出する必要があります。
Michael Hays 2018


1

私もこの問題に直面し、それを解決しようとして、アプリを実行しているChromeタブをクラッシュさせ続けました。ように見えたオブジェクトの広がりオペレータが犯人でした。

上記のadrianolskのコメントとsidonaldsonの回答の助けを借りて、次のように、babelからのspread演算子の出力であるObject.assign()を使用しました。

this.options.map(option => {
  // New properties to be added
  const newPropsObj = {
    newkey1:value1,
    newkey2:value2
  };

  // Assign new properties and return
  return Object.assign(option, newPropsObj);
});

0

これは、Key-Value構造としてオブジェクトを通過します。次に、「Active」という名前の新しいプロパティとこのプロパティのサンプル値(「Active」)を、このオブジェクト内のすべてのオブジェクトに追加します。このコードは、オブジェクトの配列とオブジェクトのオブジェクトの両方に適用できます。

   Object.keys(Results).forEach(function (key){
            Object.defineProperty(Results[key], "Active", { value: "the appropriate value"});
        });

はい、確かに、それはKey-Value構造としてオブジェクトを通過します。次に、「アクティブ」と呼ばれる新しいプロパティとサンプル値を、このオブジェクト内のすべてのオブジェクトに追加します。このコードは、オブジェクトの配列とオブジェクトのオブジェクトの両方に適用できます。
ArashMAS19年

0

ES6を使用すると、次のことが簡単にできます。

 for(const element of Results) {
      element.Active = "false";
 }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.