How to merge 2 Arrays with nested Objects into 1 array without duplicates

Question

I have two arrays of objects like this:

const oldArr = [
  { 'Tomorrow': [{ id: 2 }, { id: 4 }, { id: 3 }] }, 
  { 'Saturday': [{ id: 2 }, { id: 4 }, { id: 3 }] }
]

const newArr = [
  { 'Monday': [{ id: 2 },{ id: 4},{ id: 3 }] }, 
  { 'Tomorrow': [{ id: 1 },{ id: 5 }]}
]

I want to merge both without any duplicate keys, so it should result in:

[
  { 'Tomorrow': [{ id: 2 }, { id: 4 }, { id: 3 }, { id: 1 }, { id: 5 }] }, 
  { 'Saturday': [{ id: 2 }, { id: 4 }, { id: 3 }] },
  { 'Monday': [{ id: 2 }, { id: 4 }, { id: 3 }] } 
]

As you can see, the contents of Tomorrow have been added to the original Tomorrow, and the object of Monday has been added on.

I've vaguely figured out how to do so with nested loops, but I'm guessing there is a simpler solution using map, reduce, or the like.

Please share your reference solution.

ggorlen
– ggorlen

2022-08-22 23:53:24 +00:00
Commented Aug 22, 2022 at 23:53 — ggorlen
– ggorlen, Commented Aug 22, 2022 at 23:53

Rodrigo Rodrigues · Accepted Answer · 2022-08-23 00:16:37Z

2

This can be easily accomplished with a combination of the neat javascript spread syntax, Array and Object prototype functions, and destructuring patterns.

[...oldArr, ...newArr].flatMap(Object.entries).reduce(
  (acc, [k, v]) => ({ ...acc, [k]: [...acc[k]||[], ...v] }), {})

As simple as this!

const oldArr = [
  {'Tomorrow': [{'id':2},{'id':4},{'id':3}]}, 
  {'Saturday': [{'id':2},{'id':4},{'id':3}]}
]

const newArr = [
  {'Monday': [{'id':2},{'id':4},{'id': 3}]}, 
  {'Tomorrow': [{'id':1},{'id':5}]}
]

const result = [...oldArr, ...newArr].flatMap(Object.entries).reduce(
  (acc, [k, v]) => ({ ...acc, [k]: [...acc[k]||[], ...v] }), {})
  
console.log(result)

For a very detailed explanation of how this works, refer to this extended answer to a similar question. The difference in that other question is that there, each inner object had only one object as a value, instead of an array.

edited Aug 23, 2022 at 0:16

answered Aug 23, 2022 at 0:09

Rodrigo Rodrigues

8,6321 gold badge32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

giants22 Over a year ago

Hadn’t used flatmap before, clever solution, i noticed the output is an object of objects instead of an array of objects but can be easily tweaked

Nick · Accepted Answer · 2022-08-23 00:27:41Z

1

This can be achieved by iterating the combined arrays to generate an object with all the values for each key in the arrays; then using Object.entries to map that back to the original format:

const oldArr = [
  {'Tomorrow': [{'id':2},{'id':4},{'id':3}]}, 
  {'Saturday': [{'id':2},{'id':4},{'id':3}]}
]

const newArr = [
  {'Monday': [{'id':2},{'id':4},{'id': 3}]}, 
  {'Tomorrow': [{'id':1},{'id':5}]}
]

const result = Object.entries(oldArr.concat(newArr)
  .reduce((a, o) => {
    let k = Object.keys(o)[0]
    a[k] = (a[k] || []).concat(o[k])
    return a
  }, {})
).map(([k, v]) => ({ [k] : v}))

console.log(result)

edited Aug 23, 2022 at 0:27

answered Aug 23, 2022 at 0:17

Nick

147k23 gold badges67 silver badges106 bronze badges

1 Comment

giants22 Over a year ago

Works a treat! Very smart

Collectives™ on Stack Overflow

How to merge 2 Arrays with nested Objects into 1 array without duplicates

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related