javascriptarraysreducearray-map

Create a new array of multiple objects and array from a given array


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.


Solution

  • 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);