Merge two array objects in Javascript

Question

I have been trying to get these two array objects merged into one. I tried multiple solutions posted on Stackoverflow, but somehow my problem is little different than standard Merges.

Elements from each array from first object(arrObj1 ) need to merge with second object (arrObj2) based on the key (id).

Since second object have same key value(id:1 - two times, and id:2 - two times) multiple times, I am having challenge to figure it out.

arrObj1 = [ 
    { id: 1,
    name: 'Jack',
    date: '09/05/2018',
    web_ref_id: '311102010201210'},
    { id: 2,
    name: 'Smith',
    date: '09/12/2018',
    web_ref_id: '1111201311111203'} ]
arrObj2 = [ 
   { id: 1,
    changes_id: 1,
    city: 'Chicago',
    Zip: '12345',
    street_name: 'Rockhill Dr',
    web_ref_id: '311102010201210'},
  { id: 1,
    changes_id: 1,
    city: 'Chicago',
    Zip: '12345',
    street_name: 'Cambridge Dr',
    web_ref_id: '311102010201210'},
  { id: 2,
    changes_id: 2,
    city: 'New York',
    Zip: '43435',
    street_name: 'Smithson Dr',
    web_ref_id: '1111201311111203' },
  { id: 2,
    db_changes_id: 2,
    changes_id: 2,
    city: 'New York',
    Zip: '43435',
    street_name: 'Lombard Blvd',
    web_ref_id: '1111201311111203' } ]

Expected Result:

arrObj3 = [ 
   { id: 1,
    name: 'Jack',
    date: '09/05/2018',
    changes_id: 1,
    city: 'Chicago',
    Zip: '12345',
    street_name: 'Rockhill Dr',
    web_ref_id: '311102010201210'},
  { id: 1,
    name: 'Jack',
    date: '09/05/2018',
    changes_id: 1,
    city: 'Chicago',
    Zip: '12345',
    street_name: 'Cambridge Dr',
    web_ref_id: '311102010201210'},
  { id: 2,
    name: 'Smith',
    date: '09/12/2018'
    changes_id: 2,
    city: 'New York',
    Zip: '43435',
    street_name: 'Smithson Dr',
    web_ref_id: '1111201311111203' },
  { id: 2,
    name: 'Smith',
    date: '09/12/2018'
    db_changes_id: 2,
    changes_id: 2,
    city: 'New York',
    Zip: '43435',
    street_name: 'Lombard Blvd',
    web_ref_id: '1111201311111203' } ]

Solution Tried:

var objArr3 = objArr1,
power = objArr2,
hash = new Map,
merged = power.map(a => {
    var o = {};
    Object.assign(o, a);
    hash.set(a.id, o);
    return o;
});
objArr3.forEach(a => hash.has(a.id) && Object.assign(hash.get(a.id), a));

Somehow this is skipping inserting into the first array of second object(objArr2).

https://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items — Osman Goni Nahid, Aug 29 '18 at 08:48
I tried this one https://stackoverflow.com/questions/39063031/merge-objects-on-shared-key-value-pair-with-lodash?rq=1 — kumar, Aug 29 '18 at 08:49
I tried this one too: https://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items @Osman — kumar, Aug 29 '18 at 08:51
show the code you tried - because showing other peoples code isn't what you've done — Jaromanda X, Aug 29 '18 at 08:53
The thing you can merge array in JS two way `.concat()` function or `[...arr1, ...arr2]` both way there is no duplicate checking so you have to do it during merging. Now you can do it on own. Once you got the expected output then go for optimization. Either way is to use`Set` . — Osman Goni Nahid, Aug 29 '18 at 09:17

Denis Kuratovich · Answer 1 · 2018-08-29T14:25:03.027

You can do it so:

let arrObj1 = [ { id: 1, name: 'Jack', date: '09/05/2018', web_ref_id: '311102010201210'}, { id: 2, name: 'Smith', date: '09/12/2018', web_ref_id: '1111201311111203'} ] 

let arrObj2 = [ { id: 1, changes_id: 1, city: 'Chicago', Zip: '12345', street_name: 'Rockhill Dr', web_ref_id: '311102010201210'}, { id: 1, changes_id: 1, city: 'Chicago', Zip: '12345', street_name: 'Cambridge Dr', web_ref_id: '311102010201210'}, { id: 2, changes_id: 2, city: 'New York', Zip: '43435', street_name: 'Smithson Dr', web_ref_id: '1111201311111203' }, { id: 2, db_changes_id: 2, changes_id: 2, city: 'New York', Zip: '43435', street_name: 'Lombard Blvd', web_ref_id: '1111201311111203' } ]

//Function

let result = arrObj2.map(e => {
 return {...arrObj1.find(l => l.id = e.id), ...e}
})
 
console.log(result)

Documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Merge two array objects in Javascript

1 Answers1