I'm mapping data from an array and some of the data have the same name so I would like to display them only once and not multiple time. I'm using React and here's the api link.
Here's my code (it's just a simple map) :
{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>
)}
What I'd like is having the first with tm01, tm02, tm03, etc only once and the second with all the different attacks (but here also without repetitions).
You could create a filtered array and then map on it. Below is how to create that filtered array :
const filtredMachines = [];
machines.forEach(ma => {
if(!filtredMachines.some(m=>m.move.name === ma.move.name)){
filtredMachines.push(ma)
}
})
This function will remove any duplicated items from a given list, going by the property you pass to it. I prefer avoiding using forEach to keep the code immutable.
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