如何基于香草javascript中的属性对对象数组进行分组 [英] How to groupBy array of objects based on properties in vanilla javascript

问题描述

如何基于香草javascript中的特定属性 groupBy 对象数组?例如，给定的是:

How do you groupBy array of objects based on specific properties in vanilla javascript? For example this given:

const products = [
  {
    category: "Sporting Goods",
    price: "$49.99",
    stocked: true,
    name: "Football"
  },
  {
    category: "Sporting Goods",
    price: "$9.99",
    stocked: true,
    name: "Baseball"
  },
  {
    category: "Sporting Goods",
    price: "$29.99",
    stocked: false,
    name: "Basketball"
  },
  {
    category: "Electronics",
    price: "$99.99",
    stocked: true,
    name: "iPod Touch"
  },
  {
    category: "Electronics",
    price: "$399.99",
    stocked: false,
    name: "iPhone 5"
  },
  { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" }
];

我想运行一个reduce函数，该函数会导致像这样的新对象数组:

i want to run a reduce function that would result to a new array of objects like this:

预期输出:

const categorize = [
  {
    category:"Sporting Goods",
    products: [
      {
        name:"Football",
        price: "$49.99",
        stocked: true
      },
      {
        name:"Baseball",
        price: "$9.99",
        stocked: true
      },
      {
        name:"Basketball",
        price: "$29.99",
        stocked: true
      }
    ]
  },
  {
    category: "Electronics",
    products: [
      {
        name: "iPod Touch",
        price: "$99.99",
        stocked: true
      },
      {
        name: "iPhone 5",
        price: "$399.99",
        stocked: false
      },
      {
        name: "Nexus 7",
        price: "$199.99",
        stocked: true
      }
    ]
  }
]

我从这里的教程中获得了我的解决方案: https://www.consolelog .io/group-by-in-javascript/使用reduce函数.

i based my solution from the tutorial here: https://www.consolelog.io/group-by-in-javascript/ using the reduce function.

这是我的代码:

const groupBy = (arr,prop)=>{
  return arr.reduce((groups,item)=>{
    let val = item[prop];
    groups[val] = groups[val]||[];
    groups[val].push(item);
    return groups
  },{});
}

const categorize = groupBy(products,'category');
console.log(categorize);

/* returns an Object like
    Object {Sporting Goods: Array[3], Electronics: Array[3]}
   however it's not the intended output.
*/

我试图在groupBy函数内返回Object.values(obj)或Object.entries(obj)，但是它只返回2个数组，如[Array[3],Array[3]]，如果我将初始值(reduce的第二个参数)设置为空[]而不是{}，输出只是一个空数组.需要帮助，谢谢！

I tried to return Object.values(obj) or Object.entries(obj) inside the groupBy function but it just returns an array of 2 arrays like [Array[3],Array[3]] and if i set the initial value (2nd parameter of reduce) to empty [] instead of {}, the output is just an empty array. Need help, thanks!

推荐答案

因为您想要一个包含 objects 的数组(而不只是一个普通值数组)，所以创建一个{ category, products: [] }对象在累加器中不存在:

Because you want an array containing objects (rather than just an array of plain values), create a { category, products: [] } object if it doesn't exist in the accumulator:

const products=[{category:"Sporting Goods",price:"$49.99",stocked:!0,name:"Football"},{category:"Sporting Goods",price:"$9.99",stocked:!0,name:"Baseball"},{category:"Sporting Goods",price:"$29.99",stocked:!1,name:"Basketball"},{category:"Electronics",price:"$99.99",stocked:!0,name:"iPod Touch"},{category:"Electronics",price:"$399.99",stocked:!1,name:"iPhone 5"},{category:"Electronics",price:"$199.99",stocked:!0,name:"Nexus 7"}];

const output = Object.values(
  products.reduce((a, { category, ...item }) => {
    if (!a[category]) {
      a[category] = { category, products: [] };
    }
    a[category].products.push(item);
    return a;
  }, {})
);
console.log(output);

这篇关于如何基于香草javascript中的属性对对象数组进行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！