Dodaj właściwość do tablicy obiektów

110

Mam tablicę obiektów, jak pokazano poniżej

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

Chcę dodać jeszcze jedną właściwość o nazwie Active do każdego elementu tej tablicy obiektów.

Ostateczny wynik powinien wyglądać następująco.

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"

Czy ktoś może mi dać znać, jak to osiągnąć.

Patrick
źródło
6
Zapętlić tablicę. Dodaj właściwości do każdego elementu tablicy podczas wykonywania pętli. Którą część nie wiesz, jak to zrobić?
JJJ

Odpowiedzi:

158

Możesz użyć tej forEachmetody do wykonania podanej funkcji raz dla każdego elementu tablicy. W tej dostarczonej funkcji możesz dodać Activewłaściwość do elementu.

Results.forEach(function (element) {
  element.Active = "false";
});
Tholle
źródło
224

albo użyj map

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

Edytowane w celu uwzględnienia komentarza @adrianolsk, aby nie modyfikować oryginału i zamiast tego zwracać nowy obiekt dla każdego.

Przeczytaj specyfikację

sidonaldson
źródło
4
obsługiwane tylko w ES6
Amaynut
5
ES5 by być precyzyjnym;) - ale Babel szczęśliwie to
zdekompiluje
51
map powinien zwrócić nową tablicę nie mutować obiektu, w tym przypadku forEach byłoby lepsze, lub użyć map i zwrócić nowy obiektResults.map(obj=> ({ ...obj, Active : 'false' }))
adrianolsk
4
Świetne rozwiązanie @adrianolsk, prześlij to jako osobną odpowiedź.
Michael Hays
2
  Object.defineProperty(Results, "Active", {value : 'true',
                       writable : true,
                       enumerable : true,
                       configurable : true});
Ivan De Jesus Quezada Segura
źródło
Definiowanie właściwości dynamicznej za pomocą Object.defineProperty.
Ivan De Jesus Quezada Segura
1

Natknąłem się również na ten problem i próbując go rozwiązać, ciągle zawieszałem kartę Chrome, na której była uruchomiona moja aplikacja. Wygląda na to, że winowajcą był operator spreadu dla obiektów .

Z niewielką pomocą komentarza Adrianolska i powyższej odpowiedzi sidonaldsona, użyłem Object. assign () jako wynik operatora spreadu z babel, na przykład:

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);
});
Joel Balmer
źródło
0

Przechodzi przez obiekt jako struktura klucz-wartość. Następnie doda nową właściwość o nazwie „Aktywna” i przykładową wartość tej właściwości („Aktywna”) do każdego obiektu wewnątrz tego obiektu. ten kod można zastosować zarówno do tablicy obiektów, jak i do obiektów obiektów.

   Object.keys(Results).forEach(function (key){
            Object.defineProperty(Results[key], "Active", { value: "the appropriate value"});
        });
Arash MAS
źródło
Tak, oczywiście, przechodzi przez obiekt jako struktura klucz-wartość. Następnie doda nową właściwość o nazwie „Aktywny” i przykładową wartość do każdego obiektu wewnątrz tego obiektu. ten kod można zastosować zarówno do tablicy obiektów, jak i do obiektów obiektów.
Arash MAS
0

Dzięki ES6 możesz po prostu:

 for(const element of Results) {
      element.Active = "false";
 }
Salim Lyoussi
źródło