Question 278610 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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.

Tags:

2

Answers


  1. 0

    You can use Object.groupBy then convert to your desired form:

    Object.entries(
  Object.groupBy(CARS, ({ category }) => category)
).map(([category, data]) => ({ category, data }))
    Login or Signup to reply.
  2. 0

    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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search