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

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? — Brian Thompson
– Brian Thompson, Commented Mar 10, 2020 at 18:55
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 — Mark A Avila
– Mark A Avila, Commented Mar 10, 2020 at 18:56

General Grievance · Accepted Answer · 2023-03-28 12:58:09Z

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

Tamas Szoke · Accepted Answer · 2020-03-10 19:07:59Z

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)

Collectives™ on Stack Overflow

Merging 2 arrays into one array Javascript

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related