I have the following array
const CARS =
[
{make: "skoda", model: "kodiaq", color: "light-blue", id: "1002", category: "A"},
{make: "skoda", model: "karoq", color: "green", id: "1008", category: "B"},
{make: "renault", model: "clio", color: "grey", id: "1006", category: "A"},
{make: "renault", model: "kangoo", color: "white", id: "1042", category: "C"},
{make: "mazda", model: "cx3", color: "red", id: "1022", category: "C"},
{make: "mazda", model: "cx30", color: "orange", id: "1106", category: "D"},
{make: "ford", model: "explorer", color: "grey", id: "1162", category: "B"},
{make: "ford", model: "edge", color: "red", id: "1862", category: "A"}
]
and I need to create a new array of objects grouped by the "category" property looking like this
const NEW_CARS =
[
{
category: "A",
data:
[
{make: "skoda", model: "kodiaq", color: "light-blue", id: "1002", category: "A"},
{make: "renault", model: "clio", color: "grey", id: "1006", category: "A"},
{make: "ford", model: "edge", color: "red", id: "1862", category: "A"}
]
},
{
category: "B",
data:
[
{make: "skoda", model: "karoq", color: "green", id: "1008", category: "B"},
{make: "ford", model: "explorer", color: "grey", id: "1162", category: "B"},
]
},
{
category: "C",
data:
[
{make: "renault", model: "kangoo", color: "white", id: "1042", category: "C"},
{make: "mazda", model: "cx3", color: "red", id: "1022", category: "C"}
]
},
{
category: "D",
data:
[
{make: "mazda", model: "cx30", color: "orange", id: "1106", category: "D"}
]
}
]
I guess I would need to extract the list of categories from the original array and loop again creating a new array. I got lost, also not sure what would be the most performant approach since my array is actually pretty big.
For this, I reduce
the CARS then find
there equality.
Using a condition check their equality and if TRUE, I need to add it in an array of called existing_category. Else, I will add it in the array called accumulator.
Lastly, I will return the accumulator to see the result after the execution in NEW_CARS.
const CARS = [
{make: "skoda", model: "kodiaq", color: "light-blue", id: "1002", category: "A"},
{make: "skoda", model: "karoq", color: "green", id: "1008", category: "B"},
{make: "renault", model: "clio", color: "grey", id: "1006", category: "A"},
{make: "renault", model: "kangoo", color: "white", id: "1042", category: "C"},
{make: "mazda", model: "cx3", color: "red", id: "1022", category: "C"},
{make: "mazda", model: "cx30", color: "orange", id: "1106", category: "D"},
{make: "ford", model: "explorer", color: "grey", id: "1162", category: "B"},
{make: "ford", model: "edge", color: "red", id: "1862", category: "A"}
];
const NEW_CARS = CARS.reduce((accumulator, car) => {
const exist_category = accumulator.find(category => category.category === car.category)
if (exist_category) {
exist_category.data.push(car)
} else {
accumulator.push({category: car.category,data: [car]})
}
return accumulator;
}, []);
console.log(NEW_CARS);