Merging 2 arrays into one array Javascript

Question

I have created 2 arrays and I want to merge the array of objects into one filling up all the columns For example:

var array = [{"first_name":"John", "Last Name":"Doe", "age":46}, 
 {"first_name":"Tim", "Last Name":"Jones", "age":26},
 {"first_name":"Marcus", "Last Name":"Brown", "age":31},
 {"first_name":"Paul", "Last Name":"Daniels", "age":28}, 
 {"first_name":"Samantha", "Last Name":"Williams", "age":32 }];
var array2 = [{"first_namee":"John", "Last Name":"Doe", "age":46, "height": "65"}, 
 {"first_name":"Tim", "Last Name":"Jones", "age":26, "height": "58"}, 
 {"first_name":"Marcus", "Last Name":"Brown", "age":66, "height": "69"}, 
 {"first_name":"Paul", "Last Name":"Daniels", "age":28, "height": "72"}];

I want to merge the 2 arrays of objects into one like the following:

var arrayMerge = [{"first_name":"John", "Last Name":"Doe", "age":46, "height": "65"}, 
 {"first_name":"Tim", "Last Name":"Jones", "age":26, "height": "58"}, 
 {"first_name":"Marcus", "Last Name":"Brown", "age":66, "height": "69"}, 
 {"first_name":"Paul", "Last Name":"Daniels", "age":28, "height": "72"}, 
 {"first_name":"Samantha", "Last Name":"Williams", "age":32, "height": ""}];

How would I do this for the 2 arrays, I tried concat and merge and it gives me both arrays in one, without having all the columns into one

• Brian Thompson: By "columns" are you referring to object keys?
• Mark A Avila: Yes, thats what I meant
• Brian Thompson: It's not a terribly simple operation. You have to decide a few things first. 1. How do you identify an object as unique? The first name? Last? Both? Both and age? etc... 2. Which array is the truth? array has fewer values than array2, what if array2 has a different age? Which one should it keep?
• Mark A Avila: So the goal is merging all the objects keys into one array.since the only different is the height, and one new person if on array 2 with no height, I want to merge them together

Answer 1

First, assuming the objects are in the same order in the arrays, you could map over the first one and generate a new object for array element by using Object.assign() to merge the two objects together.

Like this:

const mergeArraysOfObjects = (arr1, arr2) =>
 arr1.map((obj1, idx) => Object.assign({}, obj1, arr2[idx]))

You can also use the new object spread operator:

const mergeArraysOfObjects = (arr1, arr2) =>
 arr1.map((obj1, idx) => ({ ...obj1, ...arr2[idx] }))

Demo with spread operator:

const array = [{"first_name":"John", "Last Name":"Doe", "age":46}, {"first_name":"Tim", "Last Name":"Jones", "age":26}, {"first_name":"Marcus", "Last Name":"Brown", "age":31}, {"first_name":"Paul", "Last Name":"Daniels", "age":28}, {"first_name":"Samantha", "Last Name":"Williams", "age":32 }];
const array2 = [{"first_namee":"John", "Last Name":"Doe", "age":46, "height": "65"}, {"first_name":"Tim", "Last Name":"Jones", "age":26, "height": "58"}, {"first_name":"Marcus", "Last Name":"Brown", "age":66, "height": "69"}, {"first_name":"Paul", "Last Name":"Daniels", "age":28, "height": "72"}];
const mergeArraysOfObjects = (arr1, arr2) =>
 arr1.map((obj1, idx) => ({ ...obj1, ...arr2[idx] }));
 
console.log(mergeArraysOfObjects(array, array2));

Answer 2

A not so flexible option is to use the ES6 spread operator, and after that, you can fill in the differences:

let array = [{"first_name":"John", "Last Name":"Doe", "age":46}, {"first_name":"Tim", "Last Name":"Jones", "age":26}, {"first_name":"Marcus", "Last Name":"Brown", "age":31}, {"first_name":"Paul", "Last Name":"Daniels", "age":28}, {"first_name":"Samantha", "Last Name":"Williams", "age":32 }];
let array2 = [{"first_namee":"John", "Last Name":"Doe", "age":46, "height": "65"}, {"first_name":"Tim", "Last Name":"Jones", "age":26, "height": "58"}, {"first_name":"Marcus", "Last Name":"Brown", "age":66, "height": "69"}, {"first_name":"Paul", "Last Name":"Daniels", "age":28, "height": "72"}];
let mergedArray = [...array, ...array2]
mergedArray.map(item => {
 if (!item.height) {
 item.height = ""
 }
})
console.log(mergedArray)