Removing Duplicate Objects From An Array By Property Name In Javascript

If you have an array of objects and you want to filter the array to remove duplicate objects but do so based on a provided key/property, this might prove to be a problem you would expect Javascript to address natively. If you are using Lodash then you have many methods at your disposal that can help.

Fortunately, if you are working with ES6 and up, writing some basic Javascript using the filter and map functions makes this possible.

The code does a basic filter which is akin to a for..loop where you return true or false to remove or keep the item. We can use the map method to create a temporary array, then we use the indexOf method to see if we can find the same object inside of our map. If we do, then we know it is a duplicate.

Nothing overly fancy or complicated here, but undoubtedly useful.

22 responses to “Removing Duplicate Objects From An Array By Property Name In Javascript”

  1. Aziz says:

    Pretty cool stuff! I just tested out the code, and it works except for undefined property. The function returns the first index in this case. example :

    array = [{
    greeting: “Hello”,
    name : “Aziz”
    }, {
    greeting: “Hello”,
    nickName : “Aziz”
    }, {
    greeting: “Hello”,
    nickName : “test”
    }
    ];

    let test = removeDuplicates(array, “fake”);
    console.log(test);

    function removeDuplicates(myArr, prop) {
    return myArr.filter((obj, pos, arr) => {
    return arr.map(mapObj =>
    mapObj[prop]).indexOf(obj[prop]) === pos;
    });
    }

    // output: [ { greeting: ‘Hello’, name: ‘Aziz’ } ]

    Any idea why?

  2. […] at his wonderful blog, Dwayne Charrington recently posted an article where he describes how to remove duplicate objects from an array by property name in javascript. It is a fantastic site and I encourage you to have a […]

  3. nitin jain says:

    great example !! thanks worked for me 🙂

  4. Kai Wollhaupt says:

    thanks for the example.
    filter and map array methods are standard since ES5.

  5. Marcos Ellys says:

    Thanks for the example, it’s a beautiful implementation

  6. Matt Parish says:

    I was testing this out and noticed that it will cause problems if run on an array with values for prop that are already unique. It ends up only returning the first value.

  7. J says:

    thank you for this. coming from C# down to JS was a bit of a step. really helped me, works like a charm.

  8. Carlos says:

    You save me, thanks a lot!

  9. Carly says:

    Thank you! This is super useful.

  10. syahiaoui says:

    Hello,

    You can use this function:

    let test = removeDuplicates(array, “fake”);
    console.log(test);

    function removeDuplicates(myArr, prop) {
    return myArr.filter((obj, pos, arr) => {
    if (obj.mvtIdentifier) {
    return arr.map(mapObj =>
    mapObj[prop]).indexOf(obj[prop]) === pos;
    } else {
    return arr.push(obj);
    }

    });
    }

  11. dharani says:

    Nice article, so much helpful on time.
    Thanks a lot!!

  12. Lovely says:

    Thanks :)))

  13. absolute working bro, thanks.

  14. nekom says:

    awesome, thank you very much, you save my life :”>

  15. Marcos Ellys says:

    Thanks for the example, nice tip

  16. fazzo says:

    I used a variation of this for work – but my team lead said it was an iteration within an iteration, and I should do both operations with one reduce() function. Is this the case? I tried reduce(), but then I have to push to a new array anyway, which is what map() in your example does. Dealing with the output of reduce also makes te code more complex. Thoughts? Do you know if your example is On, O1, etc.?

  17. Diego says:

    Hi Dwayne,
    Thanks! You’re very good.
    It saved our day 🙂

  18. Francisco says:

    Hi Dwayne,

    It’s a great tip, but it is possible to get much better performance, declaring the map before, because it will be the same and you’re creating again in each interaction.
    We can do it like that:

    function unique2(prop){
    const vetP = vet.map( el => el[prop]); // I only need to do that one time;
    return vet.filter( (obj, index) => {
    return vetP.indexOf(obj[prop]) === index;
    })
    }

  19. Francisco says:

    Hi Dwayne,

    It’s a great tip, but it is possible to get much better performance, declaring the map before, because it will be the same and you’re creating again in each interaction.
    We can do it like that:

    function unique2(vet, prop){
    const vetP = vet.map( el => el[prop]); // I only need to do that one time;
    return vet.filter( (obj, index) => {
    return vetP.indexOf(obj[prop]) === index;
    })
    }

  20. Wiktor says:

    Thanks a lot!

  21. Porya says:

    Thanks, great example !! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *