JavaScript merging objects by id

Question

What's the correct way to merge two arrays in Javascript?

I've got two arrays (for example):

var a1 = [{ id : 1, name : "test"}, { id : 2, name : "test2"}] var a2 = [{ id : 1, count : "1"}, {id : 2, count : "2"}] 

I want to be able to end up with something like:

var a3 = [{ id : 1, name : "test", count : "1"},            { id : 2, name : "test2", count : "2"}] 

Where the two arrays are being joined based on the 'id' field and extra data is simply being added.

I tried to use _.union to do this, but it simply overwrites the values from the second array into the first one

Answer 1

This should do the trick:

var mergedList = _.map(a1, function(item){     return _.extend(item, _.findWhere(a2, { id: item.id })); }); 

This assumes that the id of the second object in a1 should be 2 rather than "2"

Answer 2

Short ES6 solution

const a3 = a1.map(t1 => ({...t1, ...a2.find(t2 => t2.id === t1.id)}))