How to get the unique properties of a set of objects in a JavaScript array
Given an array of objects, here's what you can do if you want to get the values of a property, but not duplicated.
Suppose you have a bills array with this content:
const bills = [
{ date: '2018-01-20', amount: '220', category: 'Electricity' },
{ date: '2018-01-20', amount: '20', category: 'Gas' },
{ date: '2018-02-20', amount: '120', category: 'Electricity' }
]
and you want to extract the unique values of the category
attribute of each item in the array.
Here’s what you can do:
const categories = [...new Set(bills.map(bill => bill.category))]
Explanation
Set is a new data structure that JavaScript got in ES6. It’s a collection of unique values. We put into that the list of property values we get from using map()
, which how we used it will return this array:
['Electricity', 'Gas', 'Electricity']
Passing through Set, we’ll remove the duplicates.
...
is the spread operator, which will expand the set values into an array.
→ I wrote 17 books to help you become a better developer:
- C Handbook
- Command Line Handbook
- CSS Handbook
- Express Handbook
- Git Cheat Sheet
- Go Handbook
- HTML Handbook
- JS Handbook
- Laravel Handbook
- Next.js Handbook
- Node.js Handbook
- PHP Handbook
- Python Handbook
- React Handbook
- SQL Handbook
- Svelte Handbook
- Swift Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025