Estoy asignando datos de una matriz y algunos de los datos tienen el mismo nombre, por lo que me gustaría mostrarlos solo una vez y no varias veces. Estoy usando React y aquí está el enlace api.
Aquí está mi código (es solo un mapa simple):
{machines.filter((machines) => { if (search === "") { return machines } else if (machines.move.name.replace(/-/g, ' ').toLowerCase().includes(search.toLowerCase())) { return machines } }) .map((ma) => <tr key={ma?.id} className='machines_table_body_row'> <td className='machines_table_body_row_name'> {ma?.item?.name.toUpperCase()} </td> <td className='machines_table_body_row_element'> <Link to={`/moves/${ma?.move?.name}`} key={ma?.move?.name} > {ma?.move?.name.replace(/-/g, ' ')} </Link> </td> </tr> )}Lo que me gustaría es tener el primero con tm01, tm02, tm03, etc solo una vez y el segundo con todos los diferentes ataques (pero aquí también sin repeticiones).
Puede crear una matriz filtrada y luego mapearla. A continuación se muestra cómo crear esa matriz filtrada:
const filtredMachines = []; machines.forEach(ma => { if(!filtredMachines.some(m=>m.move.name === ma.move.name)){ filtredMachines.push(ma) } })Esta función eliminará cualquier elemento duplicado de una lista dada, según la propiedad que le pase. Prefiero evitar usar forEach para mantener el código inmutable.
const yourList = [ { name: "la", id: 2 }, { name: "blah", id: 3 }, { name: "blah", id: 4 }, ]; const uniqueByfield = (list, field) => list.reduce((acc, item) => { return acc.some((accItem) => accItem[field] === item[field]) ? acc : [...acc, item]; }, []); const result = uniqueByfield(yourList, "name"); console.log(result); // removes the item with id 4