从 React js 中的 javascript 个对象列表中删除重复值

Question

我有一个 React 项目，其中有一个类似于下面给出的 javascript 对象数组，在该对象中它有一个名为 category.

的值

const data = [{
    "id": 1,
    "item": "760",
    "price": "9.05",
    "category": "BMW"
  }, {
    "id": 2,
    "item": "Frontier",
    "price": "7.89",
    "category": "Nissan"
  }, {
    "id": 3,
    "item": "Odyssey",
    "price": "3.64",
    "category": "BMW"
  }]

我正在映射列表并显示 category，如下所示。

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

这里，category在有多个相似项时会重复显示多次。考虑到给定的 data 列表，category BMW 显示两次。

我要的是，即使有多个相似categories，我也只想显示一次。这可能吗？我该怎么做？

Answer 1

您可以使用 {data.find(item => (<span>{item.category}</span>))}。 find() 方法returns 提供的数组中第一个满足提供的测试函数的元素

Answer 2

您可以使用过滤器

 let array=   data.filter((v,i,a)=>a.findIndex(v2=>(v2.category===v.category))===i)

和

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

Answer 3

您可以将您的类别添加到 Set

const data = [{
    "id": 1,
    "item": "760",
    "price": "9.05",
    "category": "BMW"
  }, {
    "id": 2,
    "item": "Frontier",
    "price": "7.89",
    "category": "Nissan"
  }, {
    "id": 3,
    "item": "Odyssey",
    "price": "3.64",
    "category": "BMW"
  }]
  
let categories = new Set()
data.forEach(entry => {categories.add(entry.category) })
categories.forEach(cat => console.log(cat))

Answer 4

const data = [{
    "id": 1,
    "item": "760",
    "price": "9.05",
    "category": "BMW"
  }, {
    "id": 2,
    "item": "Frontier",
    "price": "7.89",
    "category": "Nissan"
  }, {
    "id": 3,
    "item": "Odyssey",
    "price": "3.64",
    "category": "BMW"
  }]
  
function getUniqueArrayBy(arr, key) {
   return [...new Map(arr.map(item => [item[key], item])).values()]
}
const filtered = getUniqueArrayBy(data, 'category');
console.log(filtered);

Answer 5

可以通过多种方式达到所需的结果。我会用 Set() 和解构语法来做到这一点：

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

const data = [{
  "id": 1,
  "item": "760",
  "price": "9.05",
  "category": "BMW"
}, {
  "id": 2,
  "item": "Frontier",
  "price": "7.89",
  "category": "Nissan"
}, {
  "id": 3,
  "item": "Odyssey",
  "price": "3.64",
  "category": "BMW"
}]

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

console.log(newData);

Answer 6

在链中使用 Array 的本地方法 .reduce 和 .map。

const categories = data.reduce((acc, {category}) => {
  if (!acc.includes(category)) { // check if there's not such value in accumulator
    acc.push(category); // adding category
  }
  return acc; // returning value
}, []) // [] is an accumulator value
   .map(category => <span>{category}</span>); // iterating over result

一块蛋糕。

从 React js 中的 javascript 个对象列表中删除重复值

Removing duplicate value from list of javascript objects in react js

javascript

arrays

reactjs

react-hooks

javascript-objects