如何在已经减少的对象数组上使用 .reduce()？答案

【问题标题】：How to use .reduce() on an Array of Objects that has already been reduced?如何在已经减少的对象数组上使用 .reduce()？
【发布时间】：2022-11-09 22:49:56
【问题描述】：

我正在开发的这个 Angular 应用程序正在以这种格式从 API 中获取数据：

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

我正在使用这个组件将 API 数据减少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;
        }, []);
    }
}

这可以正常工作并按预期注销，但现在我需要获取groupedData 数组并以某种方式将每个taskType 对象减少branchNumber，然后获取每个减少的taskType -> branchNumber 对象，然后减少lineOfBusiness。有人对如何实现这一目标有任何建议吗？到目前为止，我尝试过的每种方法都没有丝毫奏效，而且我的想法已经用完了，谢谢！

最终结果应该类似于

【问题讨论】：

标签： json angular object reduce

【解决方案1】：

假设this._dataService.getData 返回一个Observable（如果它不只是将其包装为of），您可以执行以下操作并通过rxjs 使用管道。

this._dataService.getData.
pipe(
 takeUntil(this.componentDestroyed$),
 map(x => groupByTask(x)),
 map(z => groupByBranchNumber(z))
).subscribe(x => ...);

其中this.componentDestroyed$ 被定义为private componentDestroyed$ = new Subject<void>();，我们确保在我们的ngOnDestroy 中处理它：

ngOnDestroy() {
        this.componentDestroyed$.next();
        this.componentDestroyed$.complete();
    }

我已经对您的代码进行了一些修改，以使我更容易推理，并且还使用类型进行分组（否则分组键是动态的，这绝对是试图弄清楚的恐怖表演）所以我将链接 Stackblitz我的回答是：https://stackblitz.com/edit/angular-vzvqqt?file=src/app/app.component.ts

最终结果可以在控制台中看到。但它的结构将是这个模型：

{
  branchNumber: string,
  grouping: { object with the rest of the properties}
}

解释代码的作用：

我们正在利用 rxjs 可管道运算符，即 takeUntil 和 map。
Pipe 可以被认为是一条装配线，从一个 observable 获取输入并返回另一个。如果您熟悉 CS 时代的管道，您就会知道它们接受一个输入并导致另一个输入或终止操作。
顾名思义，takeUntil 将继续监听可观察对象的变化，直到分配给它监听的 Subject 发出某种值。这是在ngOnDestroy 中处理的。我们这样做是为了避免内存泄漏，所有订阅都必须在不再需要时处理掉。来自 rxjs 的取运算符将在后台调用订阅的 complete 方法。
map 函数将执行给定的代码并返回某种新值
最后订阅是触发管道的原因（因为所有的 observables 都是惰性的，并且只会在订阅时执行），它启动了整个装配线。

我希望我的回答能帮助/为您指明正确的方向。

【讨论】：