Add key value (object) pair to all objects in array

Question

My question is related to Add key value pair to all objects in array

However, the solutions don't work when I try to assign an object instead of a string, int etc.

I tried to create the new key inside map function, but it only works with non-object variables.

This works

arrObjects.map(item => item.newKey = 'xxx')

This doesn't

var obj = { a: 'a', b: 'b', c: 'c' }
arrObjects.map(item => item.newKey = obj)

Output:

var arrOfObj = [{
  name: 'eve'
}, {
  name: 'john'
}, {
  name: 'jane'
}];
var obj = {
  a: 'a',
  b: 'b',
  c: 'c'
}
arrOfObj.map(item => item.newKey = obj);

console.log(arrOfObj);

.as-console-wrapper { max-height: 100% !important; top: 0; }

What is `arrObjects`? Can you post the rest of your code please? — Jack Bashford, Feb 09 '19 at 20:34
Also, you might clarify what you mean by doesn't work. What are you expecting? What is happening instead? — Mark, Feb 09 '19 at 20:35
You shouldn't mutate the original array when using `map`. Use: `arrObjects.map(item => ({...item, newKey: {...obj}}));` instead — adiga, Feb 09 '19 at 20:46

Code Maniac · Answer 1 · 2019-02-09T20:44:24.940

3

You need to create a copy of object. By default object is assigned as reference. here ... is used to create a shallow copy

var arrOfObj = [{name: 'eve'}, {name: 'john'}, { name: 'jane'}];
var obj = { a: 'a', b: 'b', c: 'c'}

arrOfObj.forEach(item => (item.newKey = {...obj}));

console.log(arrOfObj);

.as-console-wrapper { max-height: 100% !important; top: 0; }

You can see some of use case here

edited Feb 09 '19 at 20:44

answered Feb 09 '19 at 20:38

Code Maniac

37,143
5
39
60

Jack Bashford · Answer 2 · 2019-02-09T20:49:45.843

You need to use ... (spread operator)

var arrOfObj = [{ name: 'eve' }, { name: 'john' }, { name: 'jane' }];
var obj = { a: 'a', b: 'b', c: 'c' };
arrOfObj.forEach(item => item.newKey = {...obj});

console.log(arrOfObj);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Alternatively, use JSON:

var arrOfObj = [{ name: 'eve' }, { name: 'john' }, { name: 'jane' }];
var obj = { a: 'a', b: 'b', c: 'c' };
arrOfObj.forEach(item => item.newKey = JSON.parse(JSON.stringify(obj)));

console.log(arrOfObj);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Shidersz · Answer 3 · 2019-02-09T20:52:10.617

2

One alternative is to use Object.assign(). Remenber that objects are copied by the value of the reference, that was your problem, instead of a new object for every newKey, you had multiple references to the same object.

var arrOfObj = [
  {name: 'eve'},
  {name: 'john'},
  {name: 'jane'}
];

var obj = { a: 'a', b: 'b', c: 'c' };

arrOfObj.map(item => item.newKey = Object.assign({}, obj));
console.log(arrOfObj);

// After some modification.
arrOfObj[0].newKey.a = "XXX"
console.log(arrOfObj);

edited Feb 09 '19 at 20:52

answered Feb 09 '19 at 20:44

Shidersz

16,846
2
23
48

3

Note that `Object.create()` doesn't do exactly what you say it does. `Object.create()` creates a new object and sets the *prototype* to be the argument you pass to it. This is not the same as creating a copy of the object. For that matter, making a change to `obj` will still result in a perceived change in the created objects, even though they don't share a reference. – Madara's Ghost Feb 09 '19 at 20:45
1

@MadaraUchiha you were right, thank you, I changed to `Object.assign()` instead – Shidersz Feb 09 '19 at 20:53

score 0 · Answer 4 · answered Feb 09 '19 at 20:43

You have to clone the item, you are adding the same object to multiple property.

See below how it should be.

var arrOfObj = [{
  name: 'eve'
}, {
  name: 'john'
}, {
  name: 'jane'
}];
var obj = {
  a: "a",
  b: "b",
  c: "c"
}
arrOfObj.map(item => 
// clone the item 
item.newKey = JSON.parse(JSON.stringify(obj))
);

console.log(arrOfObj);

Add key value (object) pair to all objects in array

4 Answers4