Make a new object from an array of objects

Question

This is possibly a duplicate, but everywhere I search I can only seem to find people wanting to create an array of objects. Basically I'm trying to achieve the opposite, pull certain values of an array of objects out into an object. It's twisting my head a little so any of you JS gurus out there if you could give me a hand it would be very very appreciated!

Basically I have an array of objects like this:

[
 { field: 'name', value: 'sam', isRequired: true },
 { field: 'email', value: 'sam@dummyemail.net', isRequired: true },
 { field: 'message', value: 'hey', isRequired: false },
]

They're split up this way because I go through the fields for validation.

After the validation phase I want to map the field and value properties to name value pairs within a new object e.g:

{
 name: 'sam',
 email: 'sam@dummyemail.net',
 message: 'hey',
}

Like I said any help would be amazing! Cheers.

Loop over each element of the array. Get `element.field` and `element.value` and use them as the name and value of a new property in the result object. What part of this is hard to do? — Barmar, Dec 21 '16 at 21:06
`var result = array.reduce((final, obj) => (final[obj.field] = obj.value, final), {});` — Washington Guedes, Dec 21 '16 at 21:08
I guess just the implementation, would I use Object.assign and then a map loop inside that? Also if this is a duplicate could you please point out the original question i couldn't find it? Thanks — Sam Matthews, Dec 21 '16 at 21:09
That's the use case for `reduce`, as it was suggested in the comment above. — Estus Flask, Dec 21 '16 at 21:10
Thanks @Guedes, yeah that works. Does anyone know why a lot of people seem to prefer the Object.assign method now with ES6? I rarely see reduce being mentioned in this context? — Sam Matthews, Dec 21 '16 at 21:16
Not sure who's those 'a lot of people'. `reduce` is quite straightforward and basically *reduces* an array to an object with a single method. While the accepted answer creates n objects. It's just a neater one-liner version of `for`/`forEach` iteration, `var final = {}; for(var { field, value } of arr) final[field] = value`. `for` may be read a bit better but once you've accustomed with `reduce` it looks fine too. — Estus Flask, Dec 22 '16 at 21:45
Hey thanks for the explanation. Yeah I'm starting to see the different mechanics of each. Sorry I just meant that I see Object.assign used all over the place and I was wondering if there were any kind of subtle differences that may make one preferable over another e.g fat arrow functions compared to classic function calls having slightly different functionalities (For example I thought the Object.assign difference might have something to do with the way objects are passed by reference... but it's all still slightly muddy in my head) — Sam Matthews, Dec 23 '16 at 03:11

score 2 · Accepted Answer · answered Dec 21 '16 at 21:09

Array#map each object in the array into a new object with field as the key of a property, and value, well, the value of the property. Then combine the new objects array to object using the spread syntax and Object#assign:

const arr = [
 { field: 'name', value: 'sam', isRequired: true },
 { field: 'email', value: 'sam@dummyemail.net', isRequired: true },
 { field: 'message', value: 'hey', isRequired: false },
];
  
const result = Object.assign({}, ...arr.map(({ field, value }) => ({ [field]: value })));

console.log(result);

Thanks this is the approach i was trying to achieve, just wasn't so sure about how to actually implement Object.assign e,g with the empty object and the spread operator. Thanks! — Sam Matthews, Dec 21 '16 at 21:13

score 1 · Answer 2 · answered Dec 21 '16 at 21:09

you could map array into object like this

var array = [
 { field: 'name', value: 'sam', isRequired: true },
 { field: 'email', value: 'sam@dummyemail.net', isRequired: true },
 { field: 'message', value: 'hey', isRequired: false },
];
var object = {};
array.forEach(x => {
  object[x.field] = x.value;
});
console.log(object);

Make a new object from an array of objects

2 Answers2