• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Removing Duplicate Objects From An Array By Property Name In Javascript

Javascript · May 4, 2016

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.

Dwayne

Leave a Reply Cancel reply

22 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Aziz
Aziz
6 years ago

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?

0
nitin jain
nitin jain
5 years ago

great example !! thanks worked for me πŸ™‚

0
Kai Wollhaupt
Kai Wollhaupt
5 years ago

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

0
Marcos Ellys
Marcos Ellys
4 years ago

Thanks for the example, it’s a beautiful implementation

0
Matt Parish
Matt Parish
4 years ago

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.

0
J
J
4 years ago

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

0
Carlos
Carlos
4 years ago

You save me, thanks a lot!

0
den
den
4 years ago

Thanks

0
Carly
Carly
4 years ago

Thank you! This is super useful.

0
syahiaoui
syahiaoui
4 years ago

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

});
}

0
dharani
dharani
4 years ago

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

0
Lovely
Lovely
3 years ago

Thanks :)))

0
Nguyen Hai Nam
Nguyen Hai Nam
3 years ago

absolute working bro, thanks.

0
nekom
nekom
3 years ago

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

0
Marcos Ellys
Marcos Ellys
3 years ago

Thanks for the example, nice tip

0
fazzo
fazzo
3 years ago

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.?

0
Diego
Diego
3 years ago

Hi Dwayne,
Thanks! You’re very good.
It saved our day πŸ™‚

0
Francisco
Francisco
3 years ago

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

0
Francisco
Francisco
3 years ago

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

0
Wiktor
Wiktor
3 years ago

Thanks a lot!

0
Porya
Porya
2 years ago

Thanks, great example !! πŸ™‚

0
JP Denis
JP Denis
1 year ago

5 years later this post still helps people, thanks! exactly what I needed πŸ™‚

1

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • Web 3.0 may have died before it even started
  • How To Get The Hash of A File In Node.js
  • Which Neural DSP Archetype Plugins Should You Buy?
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • A List of WordPress Gutenberg Core Blocks
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex

Recent Comments

  • Casey Milne on A List of WordPress Gutenberg Core Blocks
  • Jay on Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • john on Deno Raises $21M – but is anyone using it yet?
  • Oranges on How To Store Users In Firestore Using Firebase Authentication
  • Precious on Fixing Sequel Pro SQL Encoding Error For Imported SQL Files

Copyright © 2022 Β· Dwayne Charrington Β· Log in

wpDiscuz