Javascript / ES6 forEach Issue

Question

I am trying to loop through an Array of Objects, modify each Object, and push the result into a new Array.

The Objects in the array have different values. When I examine the resulting Array all of the Objects all have the same value. They all reflect the last Object in the original Array

For Example:

const a = { choo: 'choo' }
const b = [ { foo: 'bar' }, { foo: 'baz' }, { foo: 'foo' } ]

let c = [];
b.forEach((item) => {
  c.push(Object.assign(a, {...item} ));
});

The result of c:

[ 
  { foo: 'foo', choo: 'choo' }, 
  { foo: 'foo', choo: 'choo' }, 
  { foo: 'foo', choo: 'choo' } 
]

I assume this is some sort of scope issue but I'm not sure how to fix it.

Expected results would be

[
  { foo: 'bar', choo: 'choo' }, 
  { foo: 'baz', choo: 'choo' }, 
  { foo: 'foo', choo: 'choo' } 
]

JLRishe · Accepted Answer · 2018-03-23 03:12:13Z

4

I am trying to loop through an Array of Objects, modify each Object, and push the result into a new Array.

Sounds like what you want is .map, not .forEach.

When I examine the resulting Array all of the Objects all have the same value. They all reflect the last Object in the original Array

This is because Object.assign modifies an object. You are modifying a several times and creating an array with several references to a.

The answer is to pass an empty object as the first argument to Object.assign (and use map). The use of {...item} is also meaningless, so I have replaced that with item:

const a = { choo: 'choo' }
const b = [ { foo: 'bar' }, { foo: 'baz' }, { foo: 'foo' } ]

const c = b.map((item) => Object.assign({}, a, item));

console.log(c);

Edit: If you actually do want to modify the original objects, you can do that by changing the order of the arguments to Object.assign so that item is first. I would not recommend this though:

const a = { choo: 'choo' }
const b = [ { foo: 'bar' }, { foo: 'baz' }, { foo: 'foo' } ]

const c = b.map((item) => Object.assign(item, a));

console.log(c);
console.log(b);

edited Mar 23, 2018 at 3:12

answered Mar 23, 2018 at 3:06

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CertainPerformance Over a year ago

That doesn't mutate the original object though, and he said he did want to modify it.

JLRishe Over a year ago

@CertainPerformance I'm guessing that OP just used a poor choice of words there, but fair enough. I've added an addendum.

Bergi · Accepted Answer · 2018-03-23 03:08:21Z

1

Yes, that's how Object.assign works: it modifies the target and returns it, it does not create a new object. All your results reference the a that you passed as the target.

You're looking for

const c = b.map(item => ({...a, ...item})); // with object spread syntax

or

const c = b.map(item => Object.assign({}, a, item)); // with Object.assign

answered Mar 23, 2018 at 3:08

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

Khoa · Accepted Answer · 2018-03-23 03:03:31Z

0

b.forEach((item) => {
  c.push(Object.assign(a, {...item} ));
});

Not {...b}, must be {...item}

answered Mar 23, 2018 at 3:03

Khoa

2,9321 gold badge20 silver badges15 bronze badges

1 Comment

Shawn Northrop Over a year ago

Sorry, simplified my code for the question, I am using {...item}. I have updated the question

CertainPerformance · Accepted Answer · 2018-03-23 03:05:31Z

0

The problem is your {...b} - you're copying all properties of objects in b, when you only want to copy the property of the item you're iterating over.

const a = { choo: 'choo' }
const b = [ { foo: 'bar' }, { foo: 'baz' }, { foo: 'foo' } ]
const c = [];
b.forEach((item) => {
  c.push(Object.assign(item, a));
});
console.log(c);

You also want the first parameter of Object.assign to be the object you're mutating.

answered Mar 23, 2018 at 3:05

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Comments

周左左 · Accepted Answer · 2018-03-23 03:16:42Z

0

Object.assign, this function will make your object a changed, and return the reference of object a.

That means, you change the object a and push its reference to array c in each loop.

Finally, you will get the array c which includes three references of object a. This moment, a is { foo: 'foo', choo: 'choo' } .

HOW TO SOLVE?

The key is, push the different reference to array c in each loop.

const a = { choo: 'choo' }
const b = [ { foo: 'bar' }, { foo: 'baz' }, { foo: 'foo' } ]

let c = [];
b.forEach((item) => {
  c.push(Object.assign({}, a, item ));
});

answered Mar 23, 2018 at 3:16

周左左

3823 silver badges5 bronze badges

Collectives™ on Stack Overflow

Javascript / ES6 forEach Issue

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related