JavaScript unique object properties from object array

PublishedJanuary 17, 2021

•3 min read•View as Markdown

JavaScript unique object properties from object array

Chris Bongers

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.

Comments (1)

Join the discussion

Bhargav Ponnapalli5y ago

Nice one.

We could also use this too, I might add.

Array.from(new Set([...data.map()]))

More from this blog

I wrote 1000 articles, what’s next?

Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

Dec 22, 20223 min read

Vendure community and more

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

Dec 21, 20222 min read

Deploying Vendure

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

Dec 20, 20223 min read

Vendure - Overwriting email templates

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Dec 19, 20222 min read

Customizing vendure

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

Dec 18, 20224 min read

Daily Dev Tips

887 posts

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

The issue at hand, we have an array of objects with specific categories, and I want to have a list of all these categories.

I'll show you how we did this before using a manual loop and how easily this can be done with the Set and Map combination.

Our input array

const data = [
  {id: 1, price: 12, category: 'T-shirt'},
  {id: 2, price: 50, category: 'Jeans'},
  {id: 3, price: 7, category: 'Cap'},
  {id: 4, price: 15, category: 'T-shirt'},
  {id: 5, price: 6.5, category: 'Cap'}
];

As you can see a pretty random array, how do we go about getting the following output?

const output = ['T-shirt', 'Jeans', 'Cap'];

Manually looping (Old-way)

Before Set and Map, we would need to do this. We would choose to have a temporary variable and push values into it based on whether they existed.

let unique = [];
for (let i = 0; i < data.length; i++) {
  if (!unique.includes(data[i].category)) unique.push(data[i].category);
}
// [ 'T-shirt', 'Jeans', 'Cap' ]

The outcome is exactly what we want, but it can be written way easier and nicer.

JavaScript array of unique properties

To get this unique properties array, we first need to map out input data to an array containing just the categories. For this, we will use the Map method.

const mapped = data.map(item => item.category);
// [ 'T-shirt', 'Jeans', 'Cap', 'T-shirt', 'Cap' ]

We map our input data only to return the category, which gives us all the categories.

But, as you can see, we still have duplicates. This is where JavaScript Set comes in handy. It will only keep unique values.

const unique = [...new Set(mapped)];
// [ 'T-shirt', 'Jeans', 'Cap' ]

We can even write this as a one-liner:

const unique = [...new Set(data.map(item => item.category))];

As you can see, this can be super powerful to get unique valued properties quickly.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Command Palette

Comments (1)

More from this blog

Manually looping (Old-way)

JavaScript array of unique properties

Thank you for reading, and let's connect!