If the prop name in the array equals the random name, how can I sort to show them first?

Question

As I mentioned in the title, I have a parameter that comes from the url and I have an array. If the name of the objects in this array and the parameter match, I want to show them first, then I can show the remaining data.

const {randomName} = useParams()
//randomName = "ASD"

//Example Object

const example = [{name:"bcd", size:32}, {name:"ASD", size:32} , {name:"ASD", size:32} , {name:"scd", size:32}, {name:"lgh", size:32} ]

example.map((x, index) => 
 <div> {x.name} {index} </div>
 )

//I want it rendered like this

ASD 1 
ASD 2
anyone 3
anyone 4
anyone 5
....

Answer 1

You have to sort the array

const randomName = "ASD"

const example = [{
  name: "bcd",
  size: 32
}, {
  name: "ASD",
  size: 32
}, {
  name: "ASD",
  size: 32
}, {
  name: "scd",
  size: 32
}, {
  name: "lgh",
  size: 32
}]

const result = [...example].sort((a, b) =>
  a.name === randomName ? -1 : b.name === randomName ? 1 : 0
).map((x, index) =>
  `<div> ${x.name} ${index} </div>`
)

console.log(result)

Answer 2

You could sort the wanted items to to and then map the result.

const
    value = "ASD",
    example = [{ name: "bcd", size: 32 }, { name: "ASD", size: 32 }, { name: "ASD", size: 32 }, { name: "scd", size: 32 }, { name: "lgh", size: 32 }];

example.sort((a, b) => (b.name === value) - (a.name === value));

console.log(example);

Answer 3

You could partition the data into two arrays, one of which has the ASD name and the rest that don't and then join the two arrays back together.

const example = [{name:"bcd", size:32}, {name:"ASD", size:32} , {name:"ASD", size:32} , {name:"scd", size:32}, {name:"lgh", size:32} ];

const partition = (data, partition_function) =>
  data.reduce(
    (acc, val) => (acc[+!partition_function(val)].push(val), acc),
    [[], []]
  );

const sort_asd_to_top = (data) =>
  partition(data, (val) => val.name === 'ASD').flat();

console.log(sort_asd_to_top(example));