angular - 使用 RxJs map 将一种类型的数组转换为另一种类型的数组
问题描述
在我的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},
]
有人可以指出我的代码中有什么问题以及如何解决它。
解决方案
正如地图运算符的 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}
});
推荐阅读
- javascript - 如何使用 HTML 代码检查输入的答案是否正确?
- python - QT for Python 中是否有 QSlider 的所有 QSS 属性列表?
- cmake - 无法在 Clion 中构建 FreeRTOS WIN32 演示
- laravel - 我收到错误 Class 'Tymon\JWTAuth\Providers\JWTAuthServiceProvider' not found
- java - Spring-boot中的嵌套JSON对象反序列化
- javascript - nodeJS 将 Buffer 转换为 fs.ReadStream 对象
- stream - 自定义处理 Akka Streams Flow 中的未来故障
- c++ - c++如何释放内存
- excel - SSIS 包,用于将多个 Excel 工作表导入带有工作表名称的 DB 表
- vim - 在vim中插入模式函数/缩写/片段