JavaScript – How To Get Distinct Values From an Array of Objects?
Here are the different ways to get distinct values from an array of objects in JavaScript
1. Using map() and filter() Methods
This approach is simple and effective for filtering distinct values from an array of objects. You can use map() to extract the property you want to check for uniqueness, and then apply filter() to keep only the first occurrence.
const a = [
{ id: 1, name: "Rahul" },
{ id: 2, name: "Priya" },
{ id: 1, name: "Rahul" },
{ id: 3, name: "Amit" }
];
const dist = a.filter((obj, index, self) =>
index === self.findIndex((t) => t.id === obj.id)
);
console.log(dist);
Output
[
{ id: 1, name: 'Rahul' },
{ id: 2, name: 'Priya' },
{ id: 3, name: 'Amit' }
]
2. Using Set() Constructor
The Set() constructor allows you to create a collection of unique values. You can use it to remove duplicates from an array of objects by converting the objects into a unique string representation (such as a JSON string).
const a = [
{ id: 1, name: "Rahul" },
{ id: 2, name: "Priya" },
{ id: 1, name: "Rahul" },
{ id: 3, name: "Amit" }
];
const dist = Array.from(new Set(a.map(obj => JSON.stringify(obj))))
.map(e => JSON.parse(e));
console.log(dist);
Output
[
{ id: 1, name: 'Rahul' },
{ id: 2, name: 'Priya' },
{ id: 3, name: 'Amit' }
]
3. Using map(), set() and from() Methods
You can combine map(), Set(), and Array.from() to get distinct values based on a specific property. This method ensures uniqueness while keeping your code concise.
const a = [
{ id: 1, name: "Rahul" },
{ id: 2, name: "Priya" },
{ id: 1, name: "Rahul" },
{ id: 3, name: "Amit" }
];
const dist = Array.from(new Set(a.map(obj => obj.id)))
.map(id => a.find(obj => obj.id === id));
console.log(dist);
Output
[
{ id: 1, name: 'Rahul' },
{ id: 2, name: 'Priya' },
{ id: 3, name: 'Amit' }
]
4. Using Lodash _.uniqBy() method and map()
Lodash provides the uniqBy() method, which is specifically designed to remove duplicates from an array of objects based on a specific property.
const _ = require('lodash');
const a = [
{ id: 1, name: "Rahul" },
{ id: 2, name: "Priya" },
{ id: 1, name: "Rahul" },
{ id: 3, name: "Amit" }
];
const dist = _.uniqBy(a, 'id');
console.log(dist);
Output
[
{ id: 1, name: 'Rahul' },
{ id: 2, name: 'Priya' },
{ id: 3, name: 'Amit' }
]
5. Using reduce() Method
The reduce() method allows you to accumulate distinct objects into an array by checking if the object’s property already exists in the result array.
const a = [
{ id: 1, name: "Rahul" },
{ id: 2, name: "Priya" },
{ id: 1, name: "Rahul" },
{ id: 3, name: "Amit" }
];
const dist = a.reduce((acc, obj) => {
if (!acc.some(item => item.id === obj.id)) {
acc.push(obj);
}
return acc;
}, []);
console.log(dist);
Output
[
{ id: 1, name: 'Rahul' },
{ id: 2, name: 'Priya' },
{ id: 3, name: 'Amit' }
]
6. Using filter() and indexOf()
This method uses filter() to iterate over the array and indexOf() to check if the object has already appeared in the array.
const a = [
{ id: 1, name: "Rahul" },
{ id: 2, name: "Priya" },
{ id: 1, name: "Rahul" },
{ id: 3, name: "Amit" }
];
const dist = a.filter((obj, index, self) =>
index === self.findIndex((t) => t.id === obj.id)
);
console.log(dist);
Output
[
{ id: 1, name: 'Rahul' },
{ id: 2, name: 'Priya' },
{ id: 3, name: 'Amit' }
]
7. Using Array.prototype.forEach() and a temporary object
Using a temporary object allows you to track unique properties manually during iteration.
const a = [
{ id: 1, name: "Rahul" },
{ id: 2, name: "Priya" },
{ id: 1, name: "Rahul" },
{ id: 3, name: "Amit" }
];
const seen = {};
const dist = [];
a.forEach((obj) => {
if (!seen[obj.id]) {
dist.push(obj);
seen[obj.id] = true;
}
});
console.log(dist);
Output
[
{ id: 1, name: 'Rahul' },
{ id: 2, name: 'Priya' },
{ id: 3, name: 'Amit' }
]
8. Using reduce() and Object.values()
You can also combine reduce() with Object.values() to remove duplicates by ensuring that only the first occurrence of each property is kept.
const a = [
{ id: 1, name: "Rahul" },
{ id: 2, name: "Priya" },
{ id: 1, name: "Rahul" },
{ id: 3, name: "Amit" }
];
const dist = Object.values(a.reduce((acc, obj) => {
acc[obj.id] = obj;
return acc;
}, {}));
console.log(dist);
Output
[
{ id: 1, name: 'Rahul' },
{ id: 2, name: 'Priya' },
{ id: 3, name: 'Amit' }
]
