WooCommerce v3 API请求嵌套循环中数据处理与分类商品列表构建问题

问题原因 #

1. 分类重复问题：你定义的catsWithAllProducts是全局公共对象，JS中对象为引用类型，每次循环修改该对象属性后push到数组，实际存入的都是同一个对象的引用，最终所有元素都会同步为最后一次修改的内容，因此出现重复。
2. 数据结构逻辑错误：你单独维护cats、products两个分离的数组，没有建立分类和对应商品的关联关系，不仅导致商品数据定位困难，也无法直接用于页面渲染。
3. 异步逻辑不规范：嵌套subscribe的写法无法控制并行异步请求的返回顺序，也不利于统一处理数据拼接逻辑。

解决方案 #

首先调整数据结构，直接使用「分类+对应商品」的对象数组即可，结构示例：

interface CategoryWithProducts {
  id: number;
  name: string;
  // 可扩展其他分类属性
  products: any[];
}
kats: CategoryWithProducts[] = [];

使用RxJS的switchMap+forkJoin操作符优化异步逻辑，避免嵌套订阅：

import { switchMap, map } from 'rxjs/operators';
import { forkJoin } from 'rxjs';

showAllCatsWithProducts(){
  this.pService.getAllCats().pipe(
    // 拿到全部分类后，批量生成每个分类的商品查询请求
    switchMap((cats: any[]) => {
      const productRequests = cats.map(cat => 
        this.pService.getProductsByCat(cat.id).pipe(
          // 商品请求返回后，直接和当前分类信息拼接为目标结构
          map(products => ({
            ...cat,
            products: products
          }))
        )
      );
      // 等待所有请求完成，统一返回拼接好的结果数组
      return forkJoin(productRequests);
    })
  ).subscribe((res: CategoryWithProducts[]) => {
    // 直接赋值即可，res就是符合要求的分类+商品数据
    this.kats = res;
  })
}

页面渲染示例（Angular模板） #

<div *ngFor="let category of kats">
  <h3>{{category.name}}:</h3>
  <div style="display: flex;gap: 12px;">
    <span *ngFor="let product of category.products">{{product.name}}</span>
  </div>
</div>

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