How can I group this array of objects by categoria?

items = [
  { categoria: 'Sandwiches', nombre: 'Sandwich de Pollo',  precio: 12 },
  { categoria: 'Sandwiches', nombre: 'Sandwich de Lomo',  precio: 12 },
  { categoria: 'Helados', nombre: 'Helado de 1 bola', precio: 5 },
  { categoria: 'Helados', nombre: 'Helado de 2 bolas', precio: 8 },
  { categoria: 'Helados', nombre: 'Helado de 3 bolas', precio: 10 },
];

I want to get is something like this, I'm working on Typescript with Angular:

itemsResult = [
{
  categoria: 'Sandwiches',
  items: [
    { nombre: 'Sandwich de Pollo',  precio: 12 },
    { nombre: 'Sandwich de Lomo',  precio: 12 },
  ]
},
{
  categoria: 'Helados',
  items: [
    { nombre: 'Helado de 1 bola', precio: 5 },
    { nombre: 'Helado de 2 bolas', precio: 8 },
    { nombre: 'Helado de 3 bolas', precio: 10 },
  ]
 },
];

I have tried with a reduce but what I get is an object, I want an array

this.itemsGroup = this.items.reduce((r, a) => {
      r[a.categoria] = r[a.categoria] || [];
      r[a.categoria].push(a);
      return r;
    }, Object.create(null));
    console.log(this.itemsGroup);

{
  Sandwiches: [
   { nombre: 'Sandwich de Pollo',  precio: 12 },
   { nombre: 'Sandwich de Pollo',  precio: 15 }
  ],
  Helados: [
   { nombre: 'Helado de 1 bola', precio: 5 },
   { nombre: 'Helado de 2 bolas', precio: 8 },
   { nombre: 'Helado de 3 bolas', precio: 10 }
  ]
}

CodePudding user response：

You can do it using _.groupBy()

const items = [
  { categoria: 'Sandwiches', nombre: 'Sandwich de Pollo', precio: 12 },
  { categoria: 'Sandwiches', nombre: 'Sandwich de Lomo', precio: 12 },
  { categoria: 'Helados', nombre: 'Helado de 1 bola', precio: 5 },
  { categoria: 'Helados', nombre: 'Helado de 2 bolas', precio: 8 },
  { categoria: 'Helados', nombre: 'Helado de 3 bolas', precio: 10 },
];

let newArr = [];
let grp = _.groupBy(items, "categoria");

for (const obj in grp) {
  newArr.push({ categoria: obj, items: grp[obj] });
}

console.log(newArr, 'newArr');

If you don't want to underscore.js you can do it using reduce() !

const items = [
  { categoria: 'Sandwiches', nombre: 'Sandwich de Pollo', precio: 12 },
  { categoria: 'Sandwiches', nombre: 'Sandwich de Lomo', precio: 12 },
  { categoria: 'Helados', nombre: 'Helado de 1 bola', precio: 5 },
  { categoria: 'Helados', nombre: 'Helado de 2 bolas', precio: 8 },
  { categoria: 'Helados', nombre: 'Helado de 3 bolas', precio: 10 },
];
let newArr = [];

let grp = items.reduce((group, product) => {
  const { categoria } = product;
  group[categoria] = group[categoria] ?? [];
  group[categoria].push(product);
  return group;
}, {});

for (const obj in grp) {
  newArr.push({ categoria: obj, items: grp[obj] });
}

console.log(newArr, 'newArr');

CodePudding user response：

My solution:

const items = [
  { categoria: "Sandwiches", nombre: "Sandwich de Pollo", precio: 12 },
  { categoria: "Sandwiches", nombre: "Sandwich de Lomo", precio: 12 },
  { categoria: "Helados", nombre: "Helado de 1 bola", precio: 5 },
  { categoria: "Helados", nombre: "Helado de 2 bolas", precio: 8 },
  { categoria: "Helados", nombre: "Helado de 3 bolas", precio: 10 }
];

const groupedArr = items.reduce((prev, { categoria, ...items }) => {
  const id = prev.findIndex((item) => item.categoria === categoria);
  id >= 0 
    ? prev[id].items.push(items)
    : prev.push({categoria, items: [items]})
  return prev
}, []);

console.log(groupedArr);

I think it is more clearable and shorted than @Mayur Vaghasiya solution