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.
After understanding the desired task from the above example, let us quickly see the following approaches through which we may understand as well as solve solutions for the above-shown task.
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 which are not duplicate.
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' ]
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
