Map through new array then push items to objects in exisiting array

Question

If I have one main array which exists like so.

arr = {
    people:[{name: 'Zero'},{name: 'Jeans'},{name: 'Duct'}]
}

And I want to map over an array of colors and assign each object in the array a color from this array.

colors = { color: ['#fff', '#fa0', '#eee'] }

How would this be achieved?

I can map through arr.people then map colors.color but no luck.

Would like to end up with this

 arr = {
    people:[{name: 'Zero', color: '#FFF'},
            {name: 'Jeans', color: '#FA0'},
            {name: 'Duct', color: '#EEE'}
           ]}

gurvinder372 · Accepted Answer · 2018-03-28 12:48:23Z

5

Use map

arr.people = arr.people.map( (s, i) => ({...s, color: colors.color[i]}) )

Demo

var arr = {
  people: [{
    name: 'Zero'
  }, {
    name: 'Jeans'
  }, {
    name: 'Duct'
  }]
};
var colors = {
  color: ['#fff', '#fa0', '#eee']
};
arr.people = arr.people.map((s, i) => ({ ...s,
  color: colors.color[i]
}));

console.log(arr);

Explanation

Iterate arr.people using map
Return an object from each iteration having an extra property - color using spread syntax.

edited Mar 28, 2018 at 12:48

answered Mar 28, 2018 at 12:41

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

2 Comments

Shawn Sheehan Over a year ago

Damn that looks so simple. Thank you

gurvinder372 Over a year ago

@mplungjan Sure

Collectives™ on Stack Overflow

Map through new array then push items to objects in exisiting array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related