Open In App

JavaScript - How To Get Distinct Values From an Array of Objects?

Last Updated : 27 Nov, 2024
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

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.

JavaScript 
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).

JavaScript 
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.

JavaScript 
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.

JavaScript 
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.

JavaScript 
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.

JavaScript 
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.

JavaScript 
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.

JavaScript 
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' }
]

Next Article
JavaScript - How To Get Distinct Values From an Array of Objects?

A
amansingla
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox