How to get distinct values from an array of objects in JavaScript?

In this article, we will try to understand how we may get distinct values from an array of objects in JavaScript with the help of certain examples.

Pre-requisite: Array of Objects in JavaScript

Example:

Input:
[
    { name: "Ram", age: 17 },
    { name: "Shyam", age: 17 },
    { name: "Mohan", age: 30 },
]
Output: [17, 30]

Explanation: 
From the input, which is the array of objects, select any key
that might contain duplicate values in or as another object's key. 
Select distinct values of the same key from different objects present in the array itself.

These are the following ways to solve this problem:

Approach 1: Using map() and filter() Methods

• In this approach, we will use several functions, including map() and filter() methods inside our helper method that contains an array of objects as our parameter.
• Using the map() method we will iterate over an array of objects and using the filter() method we will filter out the values that are not duplicates.

Example: Below is the implementation of the above approach.

Javascript

let employees_details = [
    { name: "Ram", age: 17 },
    { name: "Shyam", age: 17 },
    { name: "Mohan", age: 30 },
];

let desired_output = (employees_details) => {
    let unique_values = employees_details
        .map((item) => item.age)
        .filter(
            (value, index, current_value) => current_value.indexOf(value) === index
        );
    return unique_values;
};

console.log(desired_output(employees_details));

Output:

[ 17, 30 ]

Approach 2: Use Set() Constructor

• In this approach, we will use Set() provided in JavaScript which will help us to store non-duplicate values.
• After storing non-duplicated values, we will return those values in the form of an array as an output.

Example: Below is the implementation of the above approach.

Javascript

let employees_details = [
    { name: "Ram", age: 17 },
    { name: "Shyam", age: 17 },
    { name: "Mohan", age: 30 },
];

let desired_output = (employees_details) => {
    let unique_values = [
        ...new Set(employees_details.map((element) => element.age)),
    ];
    return unique_values;
};

console.log(desired_output(employees_details));

Output:

[ 17, 30 ]

Approach 3: Using map(), set() and from() Methods

• Iterate through an array and get the values of that property.
• Use set() to store the values.
• Convert set() to an array to get the unique values.

Example:

Javascript

let employees_details = [
    { name: "Ram", age: 17 },
    { name: "Shyam", age: 17 },
    { name: "Mohan", age: 30 },
];

const propertyValues =
      employees_details.map(obj => obj['name']);
const uniqueValuesSet =
      new Set(propertyValues);
const distinctValues =
       Array.from(uniqueValuesSet);
console.log(distinctValues);

Output

[ 'Ram', 'Shyam', 'Mohan' ]

Approach 4: Using Lodash _.uniqBy() method and map()

In this approach, we are using the Lodash _.uniqBy() method which returns the unique value of age and we are getting the values of age by the use of map() method in JavaScript.

Example: This example shows the implementation of above-explained approach.

Javascript

// Requiring the lodash library
const _ = require("lodash");

// Original array
let y = [
    { name: "Ram", age: 17 },
    { name: "Shyam", age: 17 },
    { name: "Mohan", age: 30 },
];

// Extracting unique values of 'age' property
let uniqueAges = _.uniq((y, 'age'));
let result = uniqueAges.map(obj => obj['age']);

// Printing the output
console.log(result);

Output:

[17,30]