從反應js中的javascript物件串列中洗掉重復值-有解無憂

我有反應專案，其中有一個類似于下面給出的物件的 javascript 陣列，并且在該物件中它有一個名為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"
  }]

我通過串列映射并顯示category如下所示。

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

在這里，category當有幾個相似的專案時，重復并顯示多次。考慮到給定的data串列，category BMW顯示兩次。

我想要的是，即使有多個相似categories的，我也只想顯示一次。這可能嗎？我該怎么做？

uj5u.com熱心網友回復：

您可以將類別添加到Set

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"
  }]
  
let categories = new Set()
data.forEach(entry => {categories.add(entry.category) })
categories.forEach(cat => console.log(cat))

uj5u.com熱心網友回復：

可以有多種方法來達到預期的結果。我會用Set()解構語法來做到這一點：

{[...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);

uj5u.com熱心網友回復：

你可以使用{data.find(item => (<span>{item.category}</span>))}. 該find() 方法回傳提供的陣列中滿足提供的測驗功能的第一個元素

uj5u.com熱心網友回復：

您可以使用過濾器

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

和

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

uj5u.com熱心網友回復：

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"
  }]
  
function getUniqueArrayBy(arr, key) {
   return [...new Map(arr.map(item => [item[key], item])).values()]
}
const filtered = getUniqueArrayBy(data, 'category');
console.log(filtered);

uj5u.com熱心網友回復：

使用本地方法.reduce和鏈中.map方法。Array

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

一塊蛋糕。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/456440.html

標籤：javascript 数组反应反应钩子 javascript 对象

上一篇：在Julia中轉換陣列中的LinRange

下一篇：構建嵌套JSON