Sometimes, we have an array of objects in our JavaScript code that have duplicate objects.
We may want to find duplicates and remove them.
In this article, we'll look at ways we can remove duplicate objects from a JavaScript array.
Array.prototype.filter
We can use the JavaScript array's filter
method to remove duplicate entries from an array.
To use it, we write:
const arr = [
{
place: "san francisco",
name: "jane",
},
{
place: "san francisco",
name: "jane",
},
{
place: "new york",
name: "james",
},
];
const result = arr.filter(
(thing, index, self) =>
index ===
self.findIndex((t) => t.place === thing.place && t.name === thing.name)
);
console.log(result);
The 2nd entry in arr
is a duplicate, and we want to remove it.
To do this, we call arr.filter
with a callback to check that the index
of the item is the same as the index returned by findIndex
.
If they're the same, then they're the first instance of an object.
findIndex
takes a callback that returns the condition with the item we're looking for.
The callback checks if thing.place
is the same as t.place
.
And the same check is done with the name
property.
t
is the item in the arr
array.
And self
if the arr
array.
So we go through the arr
array to check if the index is the index of the first instance of the item meeting the given condition.
As a result, we get:
[
{
"place": "san francisco",
"name": "jane"
},
{
"place": "new york",
"name": "james"
}
]
returned from filter
and assigned to result
.
Using JSON.stringify
We can use the JSON.stringify
method to convert a plain JavaScript object into a string.
This lets us check all the properties at once instead of hard coding the check as we did in the previous example.
For instance, we can write:
const arr = [
{
place: "san francisco",
name: "jane",
},
{
place: "san francisco",
name: "jane",
},
{
place: "new york",
name: "james",
},
];
const result = arr.filter(
(thing, index, self) =>
index === self.findIndex((t) => JSON.stringify(t) === JSON.stringify(thing))
);
console.log(result);
to remove the duplicate item by using JSON.stringify
to convert t
and thing
to strings.
Then we can check the JSON strings directive with ===
.
And we get the same result as before.
Using Sets and JSON.stringify
JavaScript comes with the Set
constructor to let us create sets, which are data structures that don't have duplicate items.
We can use it with JSON.stringify
to create a set of stringified JavaScript objects.
Then we can convert the sets back to an array with the spread operator.
Then we can convert the array of strings back to an array of objects with JSON.parse
.
So we can write:
const arr = [
{
place: "san francisco",
name: "jane",
},
{
place: "san francisco",
name: "jane",
},
{
place: "new york",
name: "james",
},
];
const result = [...new Set(arr.map((a) => JSON.stringify(a)))].map((a) =>
JSON.parse(a)
);
console.log(result);
to do this.
We map the arr
entries to strings with:
arr.map(a => JSON.stringify(a)
And we pass that into the Set
constructor.
This would remove the duplicates.
And then we spread it back into an array.
And finally, we call map
to map the stringified object array back to an object array with JSON.parse
.
So we get the same result as before.
Conclusion
We can remove duplicate objects in a JavaScript array with sets, filter
or JSON methods.