如何按值对同一项目的对象数组进行分组？答案

【问题标题】：How to group an array of objects by value for the same item?如何按值对同一项目的对象数组进行分组？
【发布时间】：2020-12-13 20:32:49
【问题描述】：

我有一个问题，如何映射和减少这样的数组：

[
    {
        id: 1,
        Price: 50,
        Item: {id: 1, Name: "A"},
        Date: {id: 1, Start: "202001"}
    },
    {
        id: 2,
        Price: 100,
        Item: {id: 1, Name: "A"},
        Date: {id: 2, Start: "202002"}
    },
    {
        id: 3,
        Price: 200,
        Item: {id: 2, Name: "B"},
        Date: {id: 1, Start: "202001"}
    }
]

我正在用 React 编写一个应用程序，我想在表格中显示这些值。

它应该看起来像这样：

ITEM	202001	202002
A	50	100
B	-	200

我希望能够用数组做到这一点：

[
    {
        id: 1,
        Item: {id: 1, Name: "A"},
        Date: [{id: 1, Start: "202001",Price: "50"},{id: 2, Start: "202002",Price: "100"}]
    },
    {
        id: 2,
        Item: {id: 2, Name: "B"},
        Date: {id: 1, Start: "202001",Price: "200"}
    }
]

有什么建议可以满足我的需要吗？

【问题讨论】：

你到底想得到什么输出？
我插入了 Markdown 格式的表格，你可以看到我想要的结果
请看这篇文章。它有几乎相同的问题。 stackoverflow.com/a/34890276/9515661
尝试了以下，但它没有分组：const tempData = [ { id: 1, Price: 50, Item: {id: 1, Name: "A"}, Date: {id: 1, Start: "202001"} }, { id: 2, Price: 100, Item: {id: 1, Name: "A"}, Date: {id: 2, Start: "202002"} }, { id: 3, Price: 200, Item: {id: 2, Name: "B"}, Date: {id: 1, Start: "202001"} } ] var groupBy = function(xs, key) { return xs.reduce(function(rv, x) { (rv[x[key]] = rv[x[key]] || []).push(x); return rv; }, {}); }; console.log(groupBy(tempData, 'Item.Name'));

标签： javascript arrays json reactjs api

【解决方案1】：

您可以使用Array.prototype.reduce()，然后像这样使用Object.values：

const arr = [
  {
      id: 1,
      Price: 50,
      Item: {id: 1, Name: "A"},
      Date: {id: 1, Start: "202001"}
  },
  {
      id: 2,
      Price: 100,
      Item: {id: 1, Name: "A"},
      Date: {id: 2, Start: "202002"}
  },
  {
      id: 3,
      Price: 200,
      Item: {id: 2, Name: "B"},
      Date: {id: 1, Start: "202001"}
  }
]

const res = Object.values(arr.reduce((acc, {Item, Date, Price}) => {
  if(!acc[Item.id]) {
    acc[Item.id] = {
      id: Item.id,
      Item,
      Date: [{...Date, Price}]
    };
  } else {
    acc[Item.id].Date = [...acc[Item.id].Date, {...Date, Price}];
  }
    
  return acc;
}, {}));

console.log(res);

【讨论】：

谢谢！我将通过创建表来测试它，然后我会告诉你结果如何。
我想以这种方式对数组进行排序，以便更轻松地映射数据。遍历它并显示表中的值的最佳方法是什么？
@bonnegnu map() 很好

【解决方案2】：

您可以使用lodash 的groupBy 方法根据Item.Name 对数据集进行分组。

先拿到包裹：


npm i lodash.groupby

然后在你的代码中使用它

import groupBy from 'lodash.groupby'

const tempData = [
    {
        id: 1,
        Price: 50,
        Item: {id: 1, Name: "A"},
        Date: {id: 1, Start: "202001"}
    },
    {
        id: 2,
        Price: 100,
        Item: {id: 1, Name: "A"},
        Date: {id: 2, Start: "202002"}
    },
    {
        id: 3,
        Price: 200,
        Item: {id: 2, Name: "B"},
        Date: {id: 1, Start: "202001"}
    }
]

groupBy(tempData, 'Item.Name')

/*
Will result as below

{
    A: [
           //objects with 'Item.Name' === 'A'
       ],
    B: [
            //objects with 'Item.Name' === 'B'
       ]
}
*/

然后，您需要使用来自groupBy 的响应中的键填充您的表格

【讨论】：

感谢您的帮助。我收到此错误。/node_modules/lodash.groupby/index.js - 安装 lodash.groupby 并运行应用程序后找不到模块。