JS Remove Duplicates From Array of Objects

We will store collection of data or elements in javascript array. If we unknowingly store duplicate values, there are several ways to remove them. So, in this page we will see how to remove duplicates from an array of objects in JS.

Several methods of removing duplicates from an array

There are several ways to remove duplicates. Let’s discuss some of them in detail.

1. Using a Set:

We can use a Set to remove duplicates from an array of objects. A Set is a collection of unique values, so by converting the array to a Set and then back to an array, we can remove duplicates.

First, we using ‘map()’ method to transform each object in the original array into a string representation using ‘JSON.stringify’. Then we creating a new Set object from the resulting array of string representations. Finally, we converting the Set object back to an array of objects by using the spread operator (…). And using map method, inside the map method, we parse each string representation back into an object using ‘JSON.parse’.

let arr = [{name: "John", job:"Developer"},
{name: "Jane", job:"Tester"},
{name: "John", job:"Developer"} ];

let uniqueArr = [...new Set(arr.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));

console.log(uniqueArr);


// Output: {name: 'John', job: 'Developer'} {name: 'Jane', job: 'Tester'}

A drawbacks of this method is, it relies on the order of properties in the string representation of each object. If two objects have the same properties but in a different order, they will be treated as distinct by the Set. However, this is usually not a problem in practice, since most JavaScript implementations preserve the order of properties in an object.

2. Using the filter() method:

We can also use the filter() method to create a new array, which contain only the unique items or objects. For example

let arr = [{name: "John", job:"Developer"},
{name: "Jane", job:"Tester"},
{name: "John", job:"Developer"}];

let uniqueArr = arr.filter((item, index) => {
return index === arr.findIndex(obj => {
return JSON.stringify(obj) === JSON.stringify(item);
});
});
console.log(uniqueArr);


// Output: {name: 'John', job: 'Developer'} {name: 'Jane', job: 'Tester'}

3. Using a for loop and an object:

We can loop through the array and using an object to keep track of the unique items based on a key value.

First, we Initialize an empty array called “uniqueArr” and an empty object called “obj”. Then we loop through the original array “arr” using a for loop and a loop counter “i”. Check if the “id” property of that element already exists as a key in the “obj” object. If the “id” property does not exist as a key in the “obj” object, it means that this is the first occurrence of that particular “id” property in the “arr” array. So add the entire object to the “uniqueArr” array to track unique objects, and add the “id” property as the key to the “obj” object with the value “true”. If the “id” attribute is already a key in the “obj” object, it means that this is not the first occurrence of the specified “id” attribute in the “arr” array. Don’t add the object to the “uniqueArr” array and do not modify the “obj” object. After the loop has finished iterating through all the elements in the “arr” array, the “uniqueArr” array will contain only the unique objects based on the “id” property. Finally, the “uniqueArr” array is printed to the console using the “console.log()” function to verify that duplicate objects have been removed.

let arr = [{id: 1, name: "John"}, {id: 2, name: "Jane"}, {id: 1, name: "John"}];
let uniqueArr = [];
let obj = {};
for (let i = 0; i < arr.length; i++) {
if (!obj[arr[i].id]) {
uniqueArr.push(arr[i]);
obj[arr[i].id] = true;
}
}
console.log(uniqueArr);


// Output: [{id: 1, name: "John"}, {id: 2, name: "Jane"}]

Conclusion

So, these are the several ways to remove duplicates.  I recommend to use the first method.