Merge two array of objects with skipping objects that has same ID property

Question

I wanna merge two arrays of objects but I want to skip the objects that has the same ID (i want to save only first object that has same id).

One array is stored locally and the other I'm fetching users from API.

const localUsers = [
    {
        "id": 1,
        "first_name": "Adam",
        "last_name": "Bent",
        "avatar": "some img url"
    },
    {
        "id": 2,
        "first_name": "New Name",
        "last_name": "New Last Name",
        "avatar": "some new img url"
    }

];

const apiUsers = [
    {
        "id": 2,
        "first_name": "Eve",
        "last_name": "Holt",
        "avatar": "some img url"
    },
    {
        "id": 3,
        "first_name": "Charles",
        "last_name": "Morris",
        "avatar": "some img url"
    }
];

I expect to get this. The object in apiUsers with the id: 2 is skipped, because he already exist in the localUsers array of objects. I want to do this to all the objects with the same id.

const mergedUsers = [
    {
        "id": 1,
        "first_name": "Adam",
        "last_name": "Bent",
        "avatar": "some img url"
    },
    {
        "id": 2,
        "first_name": "New Name",
        "last_name": "New Last Name",
        "avatar": "some new img url"
    },
    {
        "id": 3,
        "first_name": "Charles",
        "last_name": "Morris",
        "avatar": "some img url"
    }

];

@YuryTarabanko in your deleted answer you need to put localUsers after apiUsers in the Map in order for overriding to work the way OP wants. — Patrick Roberts
– Patrick Roberts, Commented Jan 10, 2019 at 15:29
@PatrickRoberts The order would be different then ;) id: 1 would be the last one — Yury Tarabanko
– Yury Tarabanko, Commented Jan 10, 2019 at 15:36
You're assuming the order matters. They haven't explicitly said that :P — Patrick Roberts
– Patrick Roberts, Commented Jan 10, 2019 at 15:37

quirimmo · Accepted Answer · 2019-01-10 15:16:19Z

3

Create your mergedUsers concatenating localUsers and the apiUsers that are not in localUsers already:

const localUsers = [
    {
        "id": 1,
        "first_name": "Adam",
        "last_name": "Bent",
        "avatar": "some img url"
    },
    {
        "id": 2,
        "first_name": "New Name",
        "last_name": "New Last Name",
        "avatar": "some new img url"
    }

];

const apiUsers = [
    {
        "id": 2,
        "first_name": "Eve",
        "last_name": "Holt",
        "avatar": "some img url"
    },
    {
        "id": 3,
        "first_name": "Charles",
        "last_name": "Morris",
        "avatar": "some img url"
    }
];

const mergedUsers = localUsers.concat(apiUsers.filter(a => !localUsers.find(b => b.id === a.id)));
console.log(mergedUsers);

answered Jan 10, 2019 at 15:16

quirimmo

10k3 gold badges33 silver badges46 bronze badges

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

4 Comments

Milos Petrovic Over a year ago

This would be cool, thanks! I'll try it and get back to you if it works for me as I need it. @quirimmo

Jordan Running Over a year ago

Since you're not actually using the "found" object, instead of !localUsers.find(b => b.id === a.id), you can use localUsers.every(b => b.id !== a.id).

quirimmo Over a year ago

@jordanrunning yeah thanks makes sense, even if there is not computational difference, actually you already get back a boolean. Feel free to edit it I am by phone now :)

Milos Petrovic Over a year ago

This helped a lot! It's the most leaner and efficient solution. Thanks :)

Nina Scholz · Accepted Answer · 2019-01-10 15:46:59Z

You could take a Map by reducing the arrays in the wanted order.

const
    localUsers = [{ id: 1, first_name: "Adam", last_name: "Bent", avatar: "some img url" }, { id: 2, first_name: "New Name", last_name: "New Last Name", avatar: "some new img url" }],
    apiUsers = [{ id: 2, first_name: "Eve", last_name: "Holt", avatar: "some img url" }, { id: 3, first_name: "Charles", last_name: "Morris", avatar: "some img url" }],
    result = Array.from(
        [localUsers, apiUsers]
            .reduce(
                (m, a) => a.reduce((n, o) => n.set(o.id, n.get(o.id) || o), m),
                new Map
            )
            .values()
    );

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

tic · Accepted Answer · 2019-01-10 16:20:00Z

1

First remove all instance from apiUsers that exist in localUsers, then add that array to localUsers. The order of the array does not matter here as not stated in the question, but easy to perform.

const filteredApiUsers = apiUsers.filter(x => !localUsers.some(y => x.id === y.id));
const mergedUsers = [...localUsers, ...filteredApiUsers];

answered Jan 10, 2019 at 16:20

tic

2,5121 gold badge23 silver badges33 bronze badges

Comments

Omkar · Accepted Answer · 2019-01-10 15:15:33Z

0

you can use this to combine the two objects with duplicates:

Array.prototype.push.apply(localUsers,apiUsers);

then you can remove duplicates with the new object.

reference : Merge 2 arrays of objects

answered Jan 10, 2019 at 15:15

Omkar

3924 silver badges15 bronze badges

Comments

ThatBrianDude · Accepted Answer · 2019-01-10 15:24:30Z

0

Filter out users from apiUserArray that are already in the localUserArray.

Merge both arrays.

let distinctApiUsers = apiUsers
                        .filter(rUser => localUsers
                                          .findIndex(lUser => lUser.id == rUser.id) == -1)

let mergedArray = localUsers.concat(distinctApiUsers)

edited Jan 10, 2019 at 15:24

answered Jan 10, 2019 at 15:16

ThatBrianDude

3,2203 gold badges23 silver badges46 bronze badges

Comments

pavan krishna · Accepted Answer · 2019-01-10 15:57:05Z

0

It's easy enough to write your own comparison function:


    for(var i=0; i<localUsers.length; ++i) {
        var checked = 0;
        for(var j=i+1; j<apiUsers.length; ++j) {
             if(localUsers[i]['id'] === apiUsers[j]['id']){
                  apiUsers.splice(j--, 1);
             }
        }
    }
    console.log(localUsers.concat(apiUsers));

answered Jan 10, 2019 at 15:57

pavan krishna

1

Collectives™ on Stack Overflow

Merge two array of objects with skipping objects that has same ID property

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related