Tengo un proyecto de reacción y en eso tengo una matriz de javascript de objeto similar a la que se proporciona a continuación y en ese objeto tiene un valor llamado 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" }] Estoy mapeando a través de la lista y mostrando la category como se muestra a continuación.
{data.map(item => (<span>{item.category}</span>))} Aquí, la category se duplica y se muestra varias veces cuando hay varios elementos similares. Teniendo en cuenta la lista data dada, la category BMW se muestra dos veces.
Lo que quiero es que, incluso si hay varias categories similares, solo quiero mostrar una vez. ¿Es esto posible y cómo puedo hacerlo?
Puede agregar sus categorías en un 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))Puede haber varias formas de alcanzar el resultado deseado. Lo haría con un Set() y sintaxis de desestructuración:
{[...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);puede usar {data.find(item => (<span>{item.category}</span>))} . El método find() devuelve el primer elemento de la matriz proporcionada que satisface la función de prueba proporcionada