Merge not same length arrays of hashes based on key attribute

Question

I would like to merge 2 arrays of hashes into 1 new array using JS, Underscore or JQuery.

Those 2 arrays could be different length and merge will be based on id attribute. Hashes in between same arrays may not have same id's , example:

arr1 id's = [1,5]

arr2 id's = [1,2]

Here are my arrays:

arr1 = [{
    id: 1
    name: 'fred'
},id: 5
    name: 'alex'
}];

arr2 = [{
    id: 1
    wage: '300'
},{
    id: 2
    wage: '10'
}]

so based on id attribute i should get following:

arr3 = [{
    id: 1
    name: 'fred'
    wage: '300'
},{
    id: 2
    wage: '10'
},{
    id: 5
    name: 'alex'
}]

I tried with Merging/extend javascript object arrays based on join of a key property in each but if arrays are not same length it doesn't work. Any help?

Answer 1

You can use Object.assign :

 arr1 = [{ id: 1, name: 'fred' }]; arr2 = [ { id: 1, wage: '300' }, { id: 2, wage: '10' } ]; var result = []; arr1.concat(arr2) .forEach(item => result[item.id] = Object.assign({}, result[item.id], item) ); result = result.filter(r => r); console.log(result) 

Answer 2

EDIT

This solution, as noted in comments, does NOT account for matching via id. To see this in action, just add { id:7, name: 'wilma' } to first array.

Im leaving it here however as it was NOT clear from example data or description this was key issue from the OP, though part fault on my part aswell. However I will comment there and if he says it is I may edit or remove this then

---

jQuery.extend()

https://api.jquery.com/jquery.extend/

jQuery.extend( [deep ], target, object1 [, objectN ] )

Passing in that extra param makes it a deep merge, ie recursive

https://jsfiddle.net/dabros/q0hhqbmf/

arr1 = [{
    id: 1,
    name: 'fred'
}];

arr2 = [{
    id: 1,
    wage: '300'
},{
    id: 2,
    wage: '10'
}]

arr3 = [];

// Use 2 extends, though $.merge(x,$.extend(y,z)) would work just as well in this case
$.extend(arr3, $.extend(true, arr1, arr2 ));

console.log(arr3);

Answer 3

Why not just simply iterate them, and collect in new array?

 <script src="https://raw.githubusercontent.com/lodash/lodash/4.13.1/dist/lodash.js"></script> <script> var arr1 = [ { id: 1, name: 'fred' }, { id: 5, name: 'alex' } ]; var arr2 = [ { id: 1, wage: '300' }, { id: 2, wage: '10' } ]; var a1, a2, arr3 = [], merged = []; // finding intersection and merging for(a1 = 0; a1 < arr1.length; a1++) { for(a2 = 0; a2 < arr2.length; a2++) { if(arr1[a1].id === arr2[a2].id) { arr3.push(_.extend(arr1[a1], arr2[a2])); merged.push(arr1[a1].id); break } } } // finding non merged elements and adding for(a1 = 0; a1 < arr1.length; a1++) { if(merged.indexOf(arr1[a1].id) > -1) { continue; } arr3.push(arr1[a1]); } // finding non merged elements and adding for(a2 = 0; a2 < arr2.length; a2++) { if(merged.indexOf(arr2[a2].id) > -1) { continue; } arr3.push(arr2[a2]); } document.write(JSON.stringify(arr3)); </script>