Angular中含data数组的交易数据按月份分组显示问题求助

我一眼就看出问题出在哪啦——你的customers数组外层多了一层嵌套，直接用_.groupBy处理的话，其实是在对那个包含data键的外层对象做分组，而不是里面真正的交易数据！只需要在lodash的链式调用里加一步，把嵌套的data数组展开就行，完全不用改JSON结构！

修改组件代码里的分组逻辑 #

把原来的链式调用开头，加上flatMap('data')来提取所有交易项：

ngOnInit() {
  const monthName = item => moment(item.transaction_date, "YYYY-MM-DD").format("MMM");
  
  // 修改这里：先提取嵌套的data数组，再分组
  this.transactions = _.chain(this.customers)
    .flatMap('data') // 关键一步：把每个customer对象里的data数组展开
    .groupBy(monthName)
    .mapValues(items => _.map(items, "customer.name"))
    .value();

  console.log(this.transactions);
}

为什么这能解决问题？ #

原来的customers结构是：

[
  {
    data: [/* 真正的交易数据在这里 */]
  }
]

直接_.groupBy(this.customers, monthName)时，lodash会遍历外层数组的每个元素（也就是那个带data的对象），但这个对象没有transaction_date属性，所以分组逻辑完全失效。

而_.flatMap('data')会遍历外层数组的每个对象，把它们的data属性值（也就是交易数组）全部合并成一个一维数组，结果就和你能正常工作的customers2结构一模一样了！之后的groupBy和mapValues逻辑就完全能复用。

模板代码不需要修改 #

你的表格模板逻辑是对的，只要transactions的结构正确（键是月份名称，值是客户名称数组），模板就能正常渲染分组后的内容。

完整修改后的组件代码 #

export class AppComponent {
  public transactions = {};
  // 带data嵌套的原始数据
  customers = [
    {
      data: [
        {
          customer: { name: "John" },
          transaction_date: "2019-9-22T13:56:11.971643+00:00"
        },
        {
          customer: { name: "Dick" },
          transaction_date: "2019-10-22T13:56:11.971643+00:00"
        },
        {
          customer: { name: "Harry" },
          transaction_date: "2019-7-22T13:56:11.971643+00:00"
        },
        {
          customer: { name: "John" },
          transaction_date: "2019-9-22T13:56:11.971643+00:00"
        }
      ]
    }
  ];

  constructor() {}

  ngOnInit() {
    const monthName = item => moment(item.transaction_date, "YYYY-MM-DD").format("MMM");
    
    this.transactions = _.chain(this.customers)
      .flatMap('data') // 提取嵌套的data数组
      .groupBy(monthName)
      .mapValues(items => _.map(items, "customer.name"))
      .value();

    console.log(this.transactions);
  }
}

这样修改后，就能完美兼容带data[]嵌套的JSON结构，按月份分组展示客户数据啦！

内容的提问来源于stack exchange，提问作者Daire