How to combine two objects with same value?

Question

I have two objects with the exact same keys but different values, here is the example I'm struggling with:

obj1={
     "cars": ["nissan","toyota","hyundai"],
     "color": ["red","black","white"], 
}
obj2={
     "cars": ["gmc","ford","chevrolet"],
     "color": ["orange","blue","grey"], 
}

I tried using both:

Object.assign(obj1,obj2)

and:

let merge1 = {...obj1,...obj2}

but output is always:

{
     "cars": [         "gmc",         "ford",         "chevrolet"     ],
     "color": [         "orange",         "blue",         "grey"     ] 
}

The desired output is:

{
     "cars": [         "nissan",         "toyota",         "hyundai"         "gmc",         "ford",         "chevrolet"     ],
     "color": [         "red",         "black",         "white"         "orange",         "blue",         "grey"     ] 
}

`Object.assign` and the spread operator are only shallow copy / merge. If your wanting to merge the arrays you will need to code that bit,. The Arrays could be done easily using `Set`.. — Keith, Feb 22 '23 at 11:08
There is not built-in syntax or method for that. You'd need to loop over entries and merge arrays. — Yury Tarabanko, Feb 22 '23 at 11:08

score 0 · Answer 1 · answered Feb 22 '23 at 11:11

obj1={
 "cars": ["nissan","toyota","hyundai"],
 "color": ["red","black","white"], 
}
obj2={
     "cars": ["gmc","ford","chevrolet"],
     "color": ["orange","blue","grey"], 
}
const merge = {
    cars: [...obj1.cars, ...obj2.cars],
    color: [...obj1.color, ...obj2.color]
}

score 0 · Answer 2 · answered Feb 22 '23 at 11:15

You can do this by grabbing the keys of the first object, then re-building to an object with the combined arrays from each object using Object.fromEntries and Array#flat:

const obj1 = {
     "cars": ["nissan", "toyota", "hyundai"],
     "color": ["red", "black", "white"], 
}
const obj2 = {
     "cars": ["gmc", "ford", "chevrolet"],
     "color": ["orange", "blue", "grey"], 
}

const combineObjArrays = (objs) => {
    const keys = Object.keys(objs[0])

    return Object.fromEntries(
        keys.map((key) => [
            key,
            objs.map((obj) => obj[key]).flat()
        ])
    )
}

console.log(combineObjArrays([obj1, obj2]))

If you going to `map().flat()` use `flatMap()` – pilchard Feb 22 '23 at 11:17 — pilchard, Feb 22 '23 at 11:17

score 0 · Accepted Answer · answered Feb 22 '23 at 11:16

When you spread or assign two objects into another the values from the second object will overwrite the values from the first object.

If you want to merge the values you need to iterate through the object merging relevant values like so:

const obj1 = {
     "cars": ["nissan", "toyota", "hyundai"],
     "color": ["red", "black", "white"],
}
const obj2 = {
     "cars": ["gmc", "ford", "chevrolet"],
     "color": ["orange", "blue", "grey"],
}

let combinedObj = {}

for (const key of Object.keys(obj1)) {
     const obj1KeyValue = obj1[key]
     const obj2KeyValue = obj1[key]

     if (Array.isArray(obj1KeyValue) && Array.isArray(obj2KeyValue)){
          combinedObj[key] = [...obj1KeyValue, ...obj2KeyValue]
     }
}

console.log(combinedObj)
//displays
//{
//  cars: [ 'nissan', 'toyota', 'hyundai', 'nissan', 'toyota', 'hyundai' ],
//  color: [ 'red', 'black', 'white', 'red', 'black', 'white' ]
//}

score 0 · Answer 4 · answered Feb 22 '23 at 11:19

I think it's the best solution to do that with a for loop.

const obj1 = {
  "cars": ["nissan", "toyota", "hyundai"],
  "color": ["red", "black", "white"],
};

const obj2 = {
  "cars": ["gmc", "ford", "chevrolet"],
  "color": ["orange", "blue", "grey"],
};

let merged = obj1

for (let key of Object.keys(obj2)) {
    if(!obj1[key]){
        merged[key] = obj2[key]
    }
}

It iterates trough obj2 and checks if the key is already included in obj1. If not, the key gets added. The variable merged contains the result.

How to combine two objects with same value?

4 Answers4