使用 RxJs 映射将一种类型的数组转换为另一种类型的数组

Question

在我的Angular应用程序中，我使用HttpClient从服务器获取json数据。但是，我需要在客户端对返回的数据进行一些转换。

因此，我尝试使用以下代码片段将从服务器返回的A 型数组转换为B 型数组。

this.http.get<any[]>(this.env.accounts.url.accountTypes).pipe(map(e => {
    console.log(e); // print the retuned array not a single item
    return {'label': e.name, 'value': e.id}
  }
)).subscribe(data => {
  this.accountTypes = data;
  console.log(this.accountTypes); // prints {label: undefined, value: undefined}
});

我一定是做错了，但我无法弄清楚这里出了什么问题。

服务器返回一个数组，如：

[
  {name: "Name 1", id: 1},
  {name: "Name 2", id: 2},
  {name: "Name 3", id: 3},
]

我需要将其转换为以下格式

[
  {label: "Name 1", value: 1},
  {label: "Name 2", value: 2},
  {label: "Name 3", value: 3},
]

有人可以指出我的代码有什么问题以及如何修复它。

Answer 1

您将Array.map与 RxJS 的map运算符混淆了。

正如地图操作符的 RxJS 文档中所述，Map 的目的是

对源中的每个值应用投影。

你可以做的是：

this.http.get<any[]>(this.env.accounts.url.accountTypes)
  .pipe(
    map(res => {
      // insert logic 
      const data = res.map(obj => ({
        label: obj.name,
        value: obj.id
      }));
      return data;
    })
  )).subscribe(data => {
    this.accountTypes = data;
    console.log(this.accountTypes); // prints {label: undefined, value: undefined}
  });