CODEWITHSUNDEEP
javascriptarraysobjectmultidimensional-arrayarray-merge
Chris
Chris

Reputation: 19

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

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!

Upvotes: 0

Views: 119

Answers (2)

Michael Geary
Michael Geary

Reputation: 28850

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;
}

Upvotes: 1

Hassan Imam
Hassan Imam

Reputation: 22524

Array#concat all your array and then using array#reduce create a merged objects with the same Client ID and then using Object.values() extract the value.

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"}],
    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"}],
    result = Object.values([].concat(arr1,arr2, arr3).reduce((r,o) => {
      r[o['Client ID']] = r[o['Client ID']] || {};
      Object.assign(r[o['Client ID']], o);
      return r;
    },{}));

console.log(result);

Upvotes: 1

Related Questions