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!

You say you can’t find the best way to achieve this. Can you share what is one way you tried? — Adelin
– Adelin, Commented Jan 13, 2018 at 5:13
With lots of for each and if statements, which gets confusing, and I know there is an easier way. — Chris
– Chris, Commented Jan 13, 2018 at 5:15
if(arr1[0].length > 0) { for(var i = 0; i < arr1.length; ) { if(newArr.length > 0) { for(var j = 0; j < newArr.length; j++) { if(arr1[i]["Client ID"] == newArr[j]["Client ID"]) { if(arr[i].length != newArr[j].length) { for(var g = 2; g < arrData[i].length; g++) { newArr.push(arr1[i][g]); } } } else { newArr.push(arr1[i]); } } i++; } else { newArr.push(arr1[i]); } } } — Chris
– Chris, Commented Jan 13, 2018 at 5:21
I would check the length of each array and if it has something in it loop through. It is very dirty... But it's for personal use and not something for others to use. — Chris
– Chris, Commented Jan 13, 2018 at 5:25

Michael Geary · Accepted Answer · 2018-01-13 05:47:21Z

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:

Take all the arrays and merge them into an object using the specified key ('Client ID' in this example).
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;
}

Hassan Imam · Accepted Answer · 2018-01-13 05:40:05Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related