JavaScript Merging 3 Arrays of Objects into 1 Array of Objects by ID and Name

Question

I am at a loss for the best way to do this. I have 3 Arrays of Objects

arr1 = [
{Client ID:"1", Client Name:"ABC", D1:"some data", D2:"more data"},
{Client ID:"2", Client Name:"DEF", D1:"some data", D2:"more data"},
{Client ID:"3", Client Name:"GHI", D1:"some data", D2:"more data"}
]


arr2 = [
{Client ID:"1", Client Name:"ABC", D3:"and more data", D4:"more more data"},
{Client ID:"2", Client Name:"DEF", D3:"and more data", D4:"more more data"},
{Client ID:"3", Client Name:"GHI", D3:"and more data", D4:"more more data"}
]

arr3 = [
{Client ID:"1", Client Name:"ABC", D5:"other data", D6:"extra Data"},
{Client ID:"2", Client Name:"DEF", D5:"other data", D6:"extra Data"},
{Client ID:"3", Client Name:"GHI", D5:"other data", D6:"extra Data"}
]

I want to combine it into

newArr = [
{Client ID:"1", Client Name:"ABC", D1:"some data", D2:"more data", D3:"and more data", D4:"more more data", D5:"other data", D6:"extra Data"},
{Client ID:"2", Client Name:"DEF", D1:"some data", D2:"more data", D3:"and more data", D4:"more more data", D5:"other data", D6:"extra Data"},
{Client ID:"3", Client Name:"GHI", D1:"some data", D2:"more data", D3:"and more data", D4:"more more data", D5:"other data", D6:"extra Data"}
]

Another catch is, that all 3 Arrays won't always have data in it! Sometimes I May only combine arr2 and arr3 or arr1 and arr3 or arr1 and arr2.

Thanks!

Answer 1

There are a number of ways you could do this. Here is a very old-school but fast way to do it. It involves two steps:

1. Take all the arrays and merge them into an object using the specified key ('Client ID' in this example).
2. Take that merged object and convert it back to an array.

You could use Lodash or other libraries for some of this, but even doing it all with plain JavaScript it's not too complicated.

var arr1 = [
{"Client ID":"1", "Client Name":"ABC", D1:"some data", D2:"more data"},
{"Client ID":"2", "Client Name":"DEF", D1:"some data", D2:"more data"},
{"Client ID":"3", "Client Name":"GHI", D1:"some data", D2:"more data"}
];

var arr2 = [
{"Client ID":"1", "Client Name":"ABC", D3:"and more data", D4:"more more data"},
{"Client ID":"2", "Client Name":"DEF", D3:"and more data", D4:"more more data"},
{"Client ID":"3", "Client Name":"GHI", D3:"and more data", D4:"more more data"}
];

var arr3 = [
{"Client ID":"1", "Client Name":"ABC", D5:"other data", D6:"extra Data"},
{"Client ID":"2", "Client Name":"DEF", D5:"other data", D6:"extra Data"},
{"Client ID":"3", "Client Name":"GHI", D5:"other data", D6:"extra Data"}
];

console.log( mergeArrays( 'Client ID', [ arr1, arr2, arr3 ] ) );

function mergeArrays( key, arrays ) {
    // First merge the arrays into an object
    // indexed by the specified key
    var merged = {};
    arrays.forEach( function( array ) {
        array.forEach( function( item ) {
            var id = item[key];
            var target = merged[id];
            if( ! target ) target = merged[id] = {};
            for( var name in item ) {
                if( item.hasOwnProperty(name) ) {
                    target[name] = item[name];
                }
            }
        });
    });
    // Now convert the merged object back to an array
    var result = [];
    for( var id in merged ) {
        if( merged.hasOwnProperty(id) ) {
            result.push( merged[id] );
        }
    }
    return result;
}