-2

I have arrays of objects that look like this:

const array1 = [{id: 1, name: "John"}, {id: 2, name: "Mary"}]

const array2 = [{id: 1, name: "John"}, {id: 3, name: "Phil"}, {id: 4, name: "Sarah"}]

How can I add unique objects from array2 to array1 so it looks like this:

const array1 = [{id: 1, name: "John"}, {id: 2, name: "Mary"}, {id: 3, name: "Phil"}, {id: 4, name: "Sarah"}]

Lodash implementations are permitted. Thanks a lot.

Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
Dave Kalu
  • 1,520
  • 3
  • 19
  • 38
  • 1
    Hey Dave. This kinda reads like you're just asking us to write the code for you, which is generally frowned upon. Consider including an attempt of your own, so we can at least tell you where you went wrong and hopefully improve your solution, rather than writing one entirely from scratch. Questions, for this reason, are required to be as specific as possible. – Tyler Roper Oct 12 '18 at 17:49
  • 1
    Possible duplicate of [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) – Herohtar Oct 12 '18 at 17:49
  • @Herohtar the problem with that target is you can't compare two objects by value using `==` or `===`. You'd have to explicitly compare their values. – Patrick Roberts Oct 12 '18 at 17:55
  • @TylerRoper Ah I see, I'll edit and repost. Thanks. – Dave Kalu Oct 12 '18 at 17:55
  • 1
    @DaveKalu You can [edit your existing question](https://stackoverflow.com/posts/52784674/edit) rather than reposting :) – Tyler Roper Oct 12 '18 at 17:55
  • @TylerRoper Do I still need to edit my question since I've already accepted an answer that works? Apologies for asking the question in the manner at which I did. Thanks for your help nonetheless. – Dave Kalu Oct 12 '18 at 18:07

3 Answers3

0

You can use _.unionBy() function to merge unique objects from arrays.

const array1 = [{id: 1, name: "John"}, {id: 2, name: "Mary"}];

const array2 = [{id: 1, name: "John"}, {id: 3, name: "Phil"}, {id: 4, name: "Sarah"}];


console.log(_.unionBy(array1, array2, 'id'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
Chayan
  • 604
  • 5
  • 12
0

Using native array functions you can get the desired result as follows:

  • Concat both arrays first using .concat()
  • Use .reduce() to create the resultant object having ids as keys and values as relevant object. If already added an object then skip the others with same ids.
  • Use Object.values() to get an array of the objects from the resultant object.

Demo:

const array1 = [{id: 1, name: "John"}, {id: 2, name: "Mary"}],
      array2 = [{id: 1, name: "John"}, {id: 3, name: "Phil"}, {id: 4, name: "Sarah"}];

const result = Object.values(
    array1.concat(array2).reduce((r, c) => (r[c.id] = r[c.id] || c, r),  {})
);
                   
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
0

You can also do it in one line via native Map object and reduce:

const arr1 = [{id: 1, name: "John"}, {id: 2, name: "Mary"}]
const arr2 = [{id: 1, name: "John"}, {id: 3, name: "Phil"}, {id: 4, name: "Sarah"}]

const result = [...[...arr1, ...arr2]
   .reduce((r, c) => (r.set(c.id, c), r), new Map()).values()]

console.log(result)
Akrion
  • 18,117
  • 1
  • 34
  • 54