Merge Array of Objects

Question

I need to merge arrays of objects in browserside javascript like this:

[
 {name: "john", age: 10},
 {name: "doe", age: 14}
] 

--> new data arrives

[
 {name: "pete", age: 88},
 {name: "larry", age: 42}
]

should become

[
 {name: "john", age: 10},
 {name: "doe", age: 14}, 
 {name: "pete", age: 88},
 {name: "larry", age: 42}
] 

Well thats simplified the arrays will contain hundreds of larger objects. Therefore I need a performant solution.

Thanks in advance yours skeec

• Bergi: concat? push? A simple loop? Won't get better than that.
• Skeec: Afaik concat doesnt work with arrays containing objects right?
• Bergi: Sure does, why wouldn't it? data = data.concat(newData)
• Skeec: Well I had something else in mind woops so the question is just obsolete sorry

Answer 1

It seems you can just use .push() or .concat() to combine the two arrays. It does not matter what is in the arrays as the array operators just work on the elements of the array abstractly without knowing what's in them.

Here's a solution that adds the new array onto the existing one:

var data = [
 {name: "john", age: 10},
 {name: "doe", age: 14}
]; 
var newInfo = [
 {name: "pete", age: 88},
 {name: "larry", age: 42}
]
data = data.concat(newInfo);

---

Or, if you really want to keep the original array (not create a new one), you can add the new array onto the end of the original array like this:

data.push.apply(data, newInfo);

• Oriol: Or data.push(...newInfo) in ES6.
• Skeec: Will pushing an array not add additional dimensions to data?
• jfriend00: @Skeec - .push() just adds new elements to the array and it can take more than one argument. data.push.apply(data, newInfo); is the same outcome as data.push(newInfo[0], newInfo[1]); but it works for any length of newInfo so you don't have to hardcode the individual elements.

Answer 2

Assuming you don't need anything other than just concatenating the 2 arrays, it's supremely simple, since arrays have a method for concatenation already.

var arr1 = [
 {name: "pete", age: 88},
 {name: "larry", age: 42}
];
var arr2 = [
 {name: "pete", age: 88},
 {name: "larry", age: 42}
];
var concatArr = arr1.concat(arr2);

MDN Page on Array.prototype.concat

Answer 3

var arr3 = [];
for(var i in arr1){
 var shared = false;
 for (var j in arr2)
 if (arr2[j].name == arr1[i].name) {
 shared = true;
 break;
 }
 if(!shared) arr3.push(arr1[i])
}
arr3 = arr3.concat(arr2);

• Bergi: Why so complicated? OP didn't mention anything about filtering name duplicates.
• Skeec: Yeah just need plain concatination thanks for your reply

Answer 4

You can use loadash for that:

Something like this:

var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
console.log(other);
// → [1, 2, 3, [4]]
console.log(array);
// → [1]

Or for Json you can use extend like this:

lodash.extend({}, mergeInto, toMerge)

• Brandon Anzaldi: There's no need to use underscore/lodash for something so trivial. Particularly not when there's already a native method for concatenation.