Combine two arrays of objects while avoiding objects with duplicate ID properties

Question

Combine two arrays of objects while avoiding objects with duplicate ID properties

I have two arrays of objects that I need to merge, but I want to exclude any objects with duplicate IDs (I only want to keep the first object with each ID).

One array is stored locally, and the other is retrieved from an 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"
    }
];

The expected output should be skipping the object in apiUsers with the id: 2, as it already exists in the localUsers array. This exclusion should apply to all matching IDs.

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"
    }

];

javascript arrays object ecmascript-6

Answer 1

Answer №1

To create a new array called mergedUsers, combine localUsers and apiUsers, excluding any duplicates from localUsers:

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);

Answer 2

To create a new array called mergedUsers, combine localUsers and apiUsers, excluding any duplicates from localUsers:

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);

Answer 3

Answer №2

To organize the arrays in a specific order, you can utilize a Map and reduce the arrays accordingly.

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; }

Answer 4

To organize the arrays in a specific order, you can utilize a Map and reduce the arrays accordingly.

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; }

Answer 5

Answer №3

To start, eliminate all instances from the apiUsers array that are also found in the localUsers array. Then, combine the filtered array with the localUsers array. The order of the elements in the final array is not specified in the question, but it can be easily accomplished.

const result = apiUsers.filter(user => !localUsers.some(localUser => user.id === localUser.id));
const mergedArray = [...localUsers, ...result];

Answer 6

To start, eliminate all instances from the apiUsers array that are also found in the localUsers array. Then, combine the filtered array with the localUsers array. The order of the elements in the final array is not specified in the question, but it can be easily accomplished.

const result = apiUsers.filter(user => !localUsers.some(localUser => user.id === localUser.id));
const mergedArray = [...localUsers, ...result];

Answer 7

Answer №4

If you want to merge two objects with duplicates, you can simply use the following code:

Array.prototype.push.apply(primaryUsers, secondaryUsers);

After merging the two objects, you can then remove any duplicate entries.

For more information, check out this helpful resource: Merging 2 arrays of objects

Answer 8

If you want to merge two objects with duplicates, you can simply use the following code:

Array.prototype.push.apply(primaryUsers, secondaryUsers);

After merging the two objects, you can then remove any duplicate entries.

For more information, check out this helpful resource: Merging 2 arrays of objects

Answer 9

Answer №5

Remove users from the apiUserArray that already exist in the localUserArray.

Combine both arrays.

let uniqueApiUsers = apiUsers
                        .filter(apiUser => !localUsers
                                          .some(localUser => localUser.id === apiUser.id))

let combinedArray = localUsers.concat(uniqueApiUsers)

Answer 10

Remove users from the apiUserArray that already exist in the localUserArray.

Combine both arrays.

let uniqueApiUsers = apiUsers
                        .filter(apiUser => !localUsers
                                          .some(localUser => localUser.id === apiUser.id))

let combinedArray = localUsers.concat(uniqueApiUsers)

Answer 11

Answer №6

If you want to create your own custom comparison function, it's actually quite simple:


    for(var x=0; x<myList.length; ++x) {
        var match = 0;
        for(var y=x+1; y<theirList.length; ++y) {
             if(myList[x]['key'] === theirList[y]['key']){
                  theirList.splice(y--, 1);
             }
        }
    }
    console.log(myList.concat(theirList));

Answer 12

If you want to create your own custom comparison function, it's actually quite simple:


    for(var x=0; x<myList.length; ++x) {
        var match = 0;
        for(var y=x+1; y<theirList.length; ++y) {
             if(myList[x]['key'] === theirList[y]['key']){
                  theirList.splice(y--, 1);
             }
        }
    }
    console.log(myList.concat(theirList));

Combine two arrays of objects while avoiding objects with duplicate ID properties

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Extracting real-time weather information using API and sharing it on Twitter

The API call within the app's service.js is not communicating with the page's controller

Adjust CSS classes as user scrolls using skrollr

order in which child objects are drawn

Implementing a dynamic dropdown list with pre-selected values within a while loop

Executing a PHP function within an AJAX method

Adapt the stylesheet for mobile devices using CSS

Ensuring that the form button is reset automatically upon using the browser's "Back" button

Tips for creating text that adjusts to different screen sizes within a div

Material UI button text not receiving props

Utilize a Fancybox hyperlink for every image within the specified div container

Is it true that when you return from a callback in JavaScript, it gives back

Interacting with data and functions in Vue using addEventListener

Experiencing an excessive amount of re-renders in React due to useState

Tips for converting mobile numbers into clickable links using JavaScript

How can I dynamically swap one div with another within the same div using Javascript?

Completely enlarge this inline-block CSS div scan-line

Can multiple `npm install` commands run at the same time?

Numerous buttons activating a single modal component

Dynamically uploading an HTML file using AJAX