How to Remove Duplicates From an Array of Objects in JavaScript

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.