Merge two objects with same keys without duplicates

Question

I have two objects. I need to merge them using JavaScript.

let object1 = {
  fruits :[apple, orange],
  veggies:[carrot, pumpkin],
}

let object2 = {
  fruits :[apple, banana, mango],
  veggies:[potato, brinjal]
}

Expected output:

let object3 = {
  fruits : [apple,orange,banana,mango],
  veggies:[carrot,pumpkin,potato,brinjal]
}

Things I tried:

object3 = {...object1, ...object2}
const object3 = (obj1, obj2) => Object.assign({}, ...Object.keys(obj1).map(i => ({[i]:{...obj1[i], ...obj2[i]}}))); console.log(object3(object1, object2));

Does this answer your question? [How to merge two arrays in JavaScript and de-duplicate items](https://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items) — jabaa, May 03 '23 at 16:49
TLDR; Merge the arrays and use a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) to de-duplicate. — jabaa, May 03 '23 at 16:50

score 3 · Answer 1 · answered May 03 '23 at 16:56

3

Use Set() and the spread operator ...:

let object1 = {
  fruits :['apple', 'orange'],
  veggies:['carrot', 'pumpkin'],
}

let object2 = {
  fruits :['apple', 'banana', 'mango'],
  veggies:['potato', 'brinjal']
}


let object3 = {
  fruits: [...new Set([...object1.fruits, ...object2.fruits])],
  veggies: [...new Set([...object1.veggies, ...object2.veggies])],
}

console.log(object3);

answered May 03 '23 at 16:56

symlink

11,984
7
29
50

@user3699344 Glad to, it's really handy – symlink May 03 '23 at 17:14

score 1 · Accepted Answer · answered May 03 '23 at 16:57

1

Your 2 tries didn't work because:

This only merge the destructed objects, it doesn't merge the values inside
This is getting closer, but it doesn't do the merge logic

Try this:

let object1 = {
  fruits :['apple', 'orange'],
  veggies:['carrot', 'pumpkin'],
}

let object2 = {
  fruits :['apple', 'banana', 'mango'],
  veggies:['potato', 'brinjal']
}

function mergeObj(...objs) {
  const keys = objs.map(o => Object.keys(o)).flat();
  return keys.reduce((result, key) => {
    result[key] = [...new Set(objs.map(o => o[key]).flat())];
    return result;
  }, {});
}

console.log(mergeObj(object1, object2))

answered May 03 '23 at 16:57

Vincent

872
1
7
13

2

[`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) + [`flat(1)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) = [`flatMap()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap) – 3limin4t0r May 03 '23 at 17:07
You should de-dupe the `keys` too. – Thomas May 03 '23 at 17:15

score 1 · Answer 3 · answered May 03 '23 at 17:15

here's my code

 let object1 = {
  fruits :['apple', 'orange'],
   veggies:['carrot', 'pumpkin'],
 }

  let object2 = {
    fruits :['apple', 'banana', 'mango'],
   veggies:['potato', 'brinjal']
 }



 const Merge = (object1, object2) => {
 if (Array.isArray(object2)) {
    return [...object1, ...object2]
    } else {
    return Object.entries(object2).reduce((acc, [key, value]) => {
      if (
       Object.keys(acc).includes(key) &&
       typeof value === 'object'
      ) {
       acc[key] = Merge(acc[key], value)
      } else {
       acc[key] = value
      }
  
      return acc
    }, { ...object1 })
   }
 }

 const result = Merge(object1, object2);

 console.log(result);

Merge two objects with same keys without duplicates

3 Answers3