224

I have an array of objects as shown below

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

I want to add one more property named Active to each element of this array of Objects.

The final outcome should be as follows.

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"

Can someone please let me know how to achieve this.

0

8 Answers 8

455

Use Array.prototype.map()

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

Read the documentation for more information.

5
  • 5
    only supported in ES6
    – Amaynut
    Mar 15, 2018 at 19:36
  • 6
    ES5 to be precise ;) - but babel will happily decompile it Mar 16, 2018 at 11:19
  • 77
    map should return a new array not mutate the object, in this case forEach would be better, or use map and return a new object Results.map(obj=> ({ ...obj, Active : 'false' }))
    – adrianolsk
    Jul 17, 2018 at 15:11
  • 6
    Great solution @adrianolsk, you should submit that as a separate answer. Aug 24, 2018 at 16:21
  • much better solution than the accepted one.
    – Ch Usman
    Feb 13 at 11:08
236

You can use the forEach method to execute a provided function once for each element in the array. In this provided function you can add the Active property to the element.

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

With ES6 you can simply do:

 for(const element of Results) {
      element.Active = "false";
 }
8

I came up against this problem too, and in trying to solve it I kept crashing the chrome tab that was running my app. It looks like the spread operator for objects was the culprit.

With a little help from adrianolsk’s comment and sidonaldson's answer above, I used Object.assign() the output of the spread operator from babel, like so:

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);
});
7

You can use map or foreach to do that. There are many answers with foreach so I will be telling about how to do it with map.

  let new_array=array.map(function(ele){
       
       return {...ele,Active:'false'};
     })

If you dont want to have a new array and instead mutate it you can use foreach.But if you want to mutate it with map as you are stubborn like me,you can do that by:

array.map(function(ele){
       
       return ele.Active='false';
     });
5
  Object.defineProperty(Results, "Active", {value : 'true',
                       writable : true,
                       enumerable : true,
                       configurable : true});
1
5

It goes through the object as a key-value structure. Then it will add a new property named 'Active' and a sample value for this property ('Active) to every single object inside of this object. this code can be applied for both array of objects and object of objects.

   Object.keys(Results).forEach(function (key){
            Object.defineProperty(Results[key], "Active", { value: "the appropriate value"});
        });
1
  • Yes sure, It goes through the object as a key-value structure. Then it will add a new property called 'Active' and a sample value to every single object inside of this object. this code can be applied for both array of objects and object of objects.
    – Arash MAS
    Sep 10, 2019 at 8:25
0

for (let i = 0 ; i < 9999 ; i ++) { const blastMe = document.getElementById('pcBlaster');
blastMe.innerHtml = <span>Bye ${i} blasterss </span> }

// output = :) | ==> You will test and reply.... , Good Luck

2
  • are you sure this answer related to question. Oct 4 at 7:40
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. Oct 4 at 7:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.