按類別分組物件陣列

我怎樣才能對這個物件陣列進行分組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 },
];

我想要的是這樣的東西，我正在使用 Angular 撰寫 Typescript：

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 },
  ]
 },
];

我試過 areduce但我得到的是一個物件，我想要一個陣列

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 }
  ]
}

uj5u.com熱心網友回復：

您可以使用_.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');

如果您不想這樣underscore.js做，可以使用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');

uj5u.com熱心網友回復：

我的解決方案：

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

我認為它比@MayurVaghasiya 解決方案更清晰和更短。

此外，它不需要任何依賴項。

標籤：

上一篇：空陣列中的打字稿搜索包括metot

下一篇：switchmap抱怨沒有回傳，但我以為我是