Angular中如何对已reduce分组的对象数组进行多层嵌套分组？

问题场景 #

从API获取如下格式的数据：

[ {
  "branchNumber" : "025",
  "lineOfBusiness" : "DC-M",
  "taskType" : "Advice",
  "role" : "LU",
  "priority" : "2"
}, {
  "branchNumber" : "null",
  "lineOfBusiness" : "DC-M",
  "taskType" : "Advice",
  "role" : "LU",
  "priority" : "2"
} ]

当前已通过reduce()实现按taskType分组的逻辑，代码如下：

export class BranchDetailsComponent implements OnInit {
    
    public dataList = [];
    public groupedData = [];
    public errorMessage;
    public branchNumber;

    constructor(private _dataService: DataService, private _route: ActivatedRoute) {}

    ngOnInit(): void { 
        let stringValue = this._route.snapshot.paramMap.get('stringValue');
        this.branchNumber = stringValue;
        this._dataService.getData(this.branchNumber).subscribe(
            data => {
                this.dataList = data;
                this.groupedData = this.groupByTask(this.dataList);
            },
            error => this.errorMessage = error);
    }
    groupByTask(data) {
        let grouped = [];
        return grouped = data.reduce((groupedTasks, element) => {
            const taskType = element.taskType;
            if (groupedTasks[taskType] == null) {
                groupedTasks[taskType] = [];
            }
            groupedTasks[taskType].push(element);
            return groupedTasks;
        }, []);
    }
}

现在需要实现多层嵌套分组：每个taskType分组下，先按branchNumber分组，再在每个branchNumber分组下按lineOfBusiness分组，最终得到taskType -> branchNumber -> lineOfBusiness -> 数据列表的嵌套结构。

实现方案 #

可以通过嵌套判断逻辑在一次reduce中完成多层分组，直接修改分组函数即可实现需求：

修改后的完整代码 #

export class BranchDetailsComponent implements OnInit {
    
    public dataList = [];
    public groupedData = {}; // 改用对象存储嵌套分组结构，更符合键值对层级逻辑
    public errorMessage;
    public branchNumber;

    constructor(private _dataService: DataService, private _route: ActivatedRoute) {}

    ngOnInit(): void { 
        let stringValue = this._route.snapshot.paramMap.get('stringValue');
        this.branchNumber = stringValue;
        this._dataService.getData(this.branchNumber).subscribe(
            data => {
                this.dataList = data;
                this.groupedData = this.groupMultiLevel(data);
            },
            error => this.errorMessage = error);
    }

    groupMultiLevel(data: any[]) {
        return data.reduce((result, item) => {
            // 第一层：按taskType创建分组
            const taskType = item.taskType;
            if (!result[taskType]) {
                result[taskType] = {};
            }

            // 第二层：在taskType分组下按branchNumber创建子分组
            const branchNumber = item.branchNumber;
            if (!result[taskType][branchNumber]) {
                result[taskType][branchNumber] = {};
            }

            // 第三层：在branchNumber分组下按lineOfBusiness创建子分组
            const lineOfBusiness = item.lineOfBusiness;
            if (!result[taskType][branchNumber][lineOfBusiness]) {
                result[taskType][branchNumber][lineOfBusiness] = [];
            }

            // 将当前数据项推入对应层级的数组
            result[taskType][branchNumber][lineOfBusiness].push(item);
            return result;
        }, {});
    }
}

结构说明 #

最终得到的嵌套结构示例如下，层级清晰且便于后续渲染或业务逻辑处理：

{
  "Advice": {
    "025": {
      "DC-M": [
        { "branchNumber": "025", "lineOfBusiness": "DC-M", "taskType": "Advice", "role": "LU", "priority": "2" }
      ]
    },
    "null": {
      "DC-M": [
        { "branchNumber": "null", "lineOfBusiness": "DC-M", "taskType": "Advice", "role": "LU", "priority": "2" }
      ]
    }
  }
}

可选优化：通用多层分组函数 #

如果后续需要灵活调整分组层级顺序或新增层级，可以封装一个通用分组函数，适配任意层级的分组需求：

// 通用分组函数：按传入的key数组顺序逐层分组
groupByLevels(data: any[], keys: string[]) {
    return keys.reduce((acc, key) => {
        const grouped = {};
        Object.values(acc).forEach(items => {
            (items as any[]).forEach(item => {
                const groupKey = item[key];
                if (!grouped[groupKey]) {
                    grouped[groupKey] = [];
                }
                grouped[groupKey].push(item);
            });
        });
        return grouped;
    }, [data]);
}

// 使用方式：按taskType -> branchNumber -> lineOfBusiness的顺序分组
this.groupedData = this.groupByLevels(this.dataList, ['taskType', 'branchNumber', 'lineOfBusiness']);

这个通用函数可以通过修改keys数组快速调整分组规则，适合动态业务场景。

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