To remove duplicate elements from an array of objects, the basic idea is to first initialize a Set()
object to hold unique values. Then looping over the array of objects and checking if the object property we want to check is in the Set
object. If the property is already present in the Set
object we should filter it out from the array and if it is not present we should keep it in the array.
TL;DR
// initialize a Set object
const uniqueValuesSet = new Set();
// array of objects with duplicate values
const arr = [
{ name: "John Doe" },
{ name: "John Doe" },
{ name: "Lily Roy" },
{ name: "Helen" },
];
const filteredArr = arr.filter((obj) => {
// check if name property value is already in the set
const isPresentInSet = uniqueValuesSet.has(obj.name);
// add name property value to Set
uniqueValuesSet.add(obj.name);
// return the negated value of
// isPresentInSet variable
return !isPresentInSet;
});
Now let's understand this step by step.
Let's say i have an array with some objects as elements, the objects has property called name
where some of the values are repeated more than once like this,
// array of objects with duplicate values
const arr = [
{ name: "John Doe" },
{ name: "John Doe" },
{ name: "Lily Roy" },
{ name: "Helen" },
];
To remove these duplicate object elements first let's create a Set
object to hold unique values. It can be done like this,
// initialize a Set object
const uniqueValuesSet = new Set();
// array of objects with duplicate values
const arr = [
{ name: "John Doe" },
{ name: "John Doe" },
{ name: "Lily Roy" },
{ name: "Helen" },
];
Now let' use the array filter()
method to loop over each array elements (in our case objects are the elements) and filter out some elements based on certain condition. It can be done like this,
// initialize a Set object
const uniqueValuesSet = new Set();
// array of objects with duplicate values
const arr = [
{ name: "John Doe" },
{ name: "John Doe" },
{ name: "Lily Roy" },
{ name: "Helen" },
];
const filteredArr = arr.filter((obj) => {
// some condition to check
});
Now inside the filter()
method, we can write the logic to filter out the array elements.
First, let's check if the current object's name property value is already present in the Set
object using the has()
method like this,
// initialize a Set object
const uniqueValuesSet = new Set();
// array of objects with duplicate values
const arr = [
{ name: "John Doe" },
{ name: "John Doe" },
{ name: "Lily Roy" },
{ name: "Helen" },
];
const filteredArr = arr.filter((obj) => {
// check if name property value is already in the set
const isPresentInSet = uniqueValuesSet.has(obj.name);
});
Now we are going to add the current object's name
property value anyway to the Set
.
Since the Set()
object will only add the elements if they are not already present in the Set. This helps us in keeping the Set with unique values
It can be done like this,
// initialize a Set object
const uniqueValuesSet = new Set();
// array of objects with duplicate values
const arr = [
{ name: "John Doe" },
{ name: "John Doe" },
{ name: "Lily Roy" },
{ name: "Helen" },
];
const filteredArr = arr.filter((obj) => {
// check if name property value is already in the set
const isPresentInSet = uniqueValuesSet.has(obj.name);
// add name property value to Set
uniqueValuesSet.add(obj.name);
});
Now at last let's return the negated value of the isPresentInSet
variable thus filtering out those elements which are already in the Set.
It can be one like this,
// initialize a Set object
const uniqueValuesSet = new Set();
// array of objects with duplicate values
const arr = [
{ name: "John Doe" },
{ name: "John Doe" },
{ name: "Lily Roy" },
{ name: "Helen" },
];
const filteredArr = arr.filter((obj) => {
// check if name property value is already in the set
const isPresentInSet = uniqueValuesSet.has(obj.name);
// add name property value to Set
uniqueValuesSet.add(obj.name);
// return the negated value of
// isPresentInSet variable
return !isPresentInSet;
});
console.log(filteredArr);
/*
OUTPUT:
[
{ name: "John Doe" },
{ name: "Lily Roy" },
{ name: "Helen" },
]
*/
- If boolean
true
is returned the filter method keeps the array element and filter out the element isfalse
is returned.
See the above code live in JSBin.