Removing duplicate value from list of javascript objects in react js

April 5, 2022

I have react project and in that have a javascript array of object similar to given below and in that object it has a value called category.

const data = [{
    "id": 1,
    "item": "760",
    "price": "$609.05",
    "category": "BMW"
  }, {
    "id": 2,
    "item": "Frontier",
    "price": "$317.89",
    "category": "Nissan"
  }, {
    "id": 3,
    "item": "Odyssey",
    "price": "$603.64",
    "category": "BMW"
  }]

Im mapping through the list and displaying the category as shown below.

{data.map(item => (<span>{item.category}</span>))}

Here, the category duplicates and display several times when there are several similar items. Considering the given data list, the category BMW display twice.

What I want is, even if there are multiple similar categories, I only want to display once. Is this possible and how can I do it?

>Solution :

There can be various ways to reach the desired result. I would do it with a Set() and destructuring syntax:

{[...new Set(data.map(item => (<span>{item.category}</span>)))]}

const data = [{
  "id": 1,
  "item": "760",
  "price": "$609.05",
  "category": "BMW"
}, {
  "id": 2,
  "item": "Frontier",
  "price": "$317.89",
  "category": "Nissan"
}, {
  "id": 3,
  "item": "Odyssey",
  "price": "$603.64",
  "category": "BMW"
}]

const newData = [...new Set(data.map(item => ("<span>" + item.category + "</span>")))]

console.log(newData);