Question

从我收到的后端

{ 
 top10: [{ amount: 5634, items: { code: "NIK", description: "NIKE" }}... x10]
 brands: [ { amount: 6564, items: { code: "ADD", description: "ADDIDAS" }}...x169]
}

前 10 名的品牌也在品牌阵列中。所以brands数组包含所有，top10只是最受欢迎的10个。

我需要返回一个看起来像这样的数组。

[{amount: 6564, items: { code: "ADD", description: "ADDIDAS", group: "Top10"},
{amount: 3362, items: { code: "PUM", description: "PUMA", group: "Top10"}...rest of top 10, 
{amount: 6564, items: { code: "ADD", description: "ADDIDAS", group: "allbrands"}, 
{amount: 3362, items: { code: "PUM", description: "PUMA", group: "allbrands"}... rest of brands]

所以我需要映射第一个数组并附加一个名为 group 的额外属性并为其赋值“Top10”，然后映射第二个数组并附加 group 属性并为其赋予值“allbrands”并发出所有内容作为单个数组。

我正在考虑通过 flatmap/mergemap 管道响应，但我不确定在这种情况下是否正确使用它们。

我需要以下正确版本。

this.http.get(`${mainURL)`).pipe(flatMap( item => { // iterate over item and 
     append group to each item with name of array
    }

Answer 1

flatMap 是一种高阶映射运算符，用于从一个 observable 映射到另一个。在您的情况下，您需要使用 map 运算符。您还需要使用带有扩展运算符的 Array#map 来组合数组并为数组的每个对象引入一个新属性。

this.http.get(`${mainURL}`).pipe(
  map((brands: any) => {
    const top10WGroups = brands.top10.map(brand => ({...brand, group: "Top10"}));
    const allWGroups = brands.brands.map(brand => ({...brand, group: "allbrands"}));
    return [ ...top10WGroups, ...allWGroups ];
  }
)

RxJS 将 2 个数组映射为一个并添加一个属性。哪个运营商？

1 个答案: