javascript - 如何按键提取数组并对其进行分组

Question

我正在构建一个 Angular 9 应用程序。在此应用程序中，我有一个动态获取的 JSON 数组。我需要获取 JSON 数组，然后根据键进行提取和分组。数组示例:

const collection = [{
      title: 'Product A',
      price: 234,
      cost: 234
    }, {
      title: 'Product B',
      price: 100,
      cost: 200
    }, {
      title: 'Product C',
      price: 344,
      cost: 55
    }, {
      title: 'Product D',
      price: 222,
      cost: 332
    }];

我可以设法提取单个 key ，但我想要一个方法来获取任何 JSON 数组，然后提取每个 key 并对其进行分组。

这是我用于提取单个 key 的代码。我必须对键名(标题)进行硬编码。

groupByKey(array, key) {
    return array.map(a => a.title);
  }

这就是我想要将原始 JSON 数组转换为:

[{
    header: "title",
    rows: ["Product A", "Product B", "Product C", "Product D"]
}, {
    header: "price",
    rows: [234, 100, 344, 222]
}, {
    header: "cost",
    rows: [234, 200, 55, 332]
}]

Answer 1

您可以对数组执行reduce操作，使用一个对象来存储每个键的所有值。

const collection = [{
      title: 'Product A',
      price: 234,
      cost: 234
    }, {
      title: 'Product B',
      price: 100,
      cost: 200
    }, {
      title: 'Product C',
      price: 344,
      cost: 55
    }, {
      title: 'Product D',
      price: 222,
      cost: 332
    }];
function group(arr){
  return Object.values(
    arr.reduce((acc,curr)=>{
      Object.entries(curr).forEach(([k,v])=>{
        (acc[k] = acc[k] || {header: k, rows: []}).rows.push(v);
      });
      return acc;
    }, {})
  );
}
console.log(group(collection));