Angular 2 和 RxJS：如何更改返回 Observable 的 HTTP 调用答案

【问题标题】：Angular 2 and RxJS: How to change HTTP call that returns ObservableAngular 2 和 RxJS：如何更改返回 Observable 的 HTTP 调用
【发布时间】：2017-07-14 19:33:24
【问题描述】：

如何更改此函数以使用下面描述的 JSON 更改？

当前函数返回一个Observable<User[]>，但使用新的JSON，新的admin 对象已被添加。新函数应该成功地观察到现有的users 数组和新的admins 数组。

getData(): Observable<User[]> {
  return this.http
    .get('www.example.com/api/users)
    .map((r: Response) => r.json().assets.users as User[]);
}

从/api/users返回的JSON

{
"assets": {
    "users": [
        // user objects
    ]
}

...现在返回两个数组，users 和 admins。

{
"assets": {
    "users": [
        // array of user objects
    ],
    "admins": [
        // array of admin objects
    ]

}

请假设我的代码确实已经创建了 User 和 Admin 类，它们正确反映了返回的相关 JSON 对象的属性。

【问题讨论】：

那你想要什么？不清楚
感谢您的反馈。我在问题的开头添加了更多细节。
新函数应该成功观察 - 观察是指从两个数组返回对象吗？还是返回两个数组？
第一个：从两个数组中返回对象。
但这不是它的工作方式，它返回一个用户数组，而不是用户对象

标签： angular rxjs observable angular2-observables

【解决方案1】：

嗯，你有几个选择如何返回数据：

getData(): Observable<User[]> {
  return this.http
    .get('www.example.com/api/users')
    .map((r: Response) => { 
         const assets = r.json().assets;
         return {
             users: assets.users as User[],
             admins: assets.admins as Admin[]
         }
     });
}

或者像这样：

getData(): Observable<User[]> {
  return this.http
    .get('www.example.com/api/users')
    .map((r: Response) => { 
         return [
             assets.users as User[],
             assets.admins as Admin[]
         ]
     });
}

或者像这样：

getData(): Observable<User[]> {
  return this.http
    .get('www.example.com/api/users')
    .map((r: Response) => { 
         return [
             ...assets.users as User[],
             ...assets.admins as Admin[]
         ]
     });
}

【讨论】：

解释这里发生了什么：.map() 使用它所附加的数组中的值返回一个新数组。因此，为了返回一个包含用户和管理员的新数组，需要在.map() 中使用一个函数将响应数据转换为新的所需数组。
我可以这样说吗？你们两个摇滚！一个 RxJS 新手的好答案和精彩的解释。我现在要努力实现这一点。我希望我的编辑有所帮助。我试图遵循指南并“展示研究成果”，但我可能有点迷失在兔子洞里。
@Maximus 您能否在最终答案中解释“...assets”中的省略号？
@JerryHuckins，当然，这称为扩展语法，并在 here 进行了解释。如果有帮助，请考虑接受我的回答。谢谢
@Maximus 我接受了你的回答。如果您觉得这个问题有用，请考虑点赞。

【解决方案2】：

如果你想在同一个数组中返回用户和管理员，下面的代码应该可以解决问题：

getData(): Observable<User[]> {
  return this.http
    .get('www.example.com/api/users)
    .map((r: Response) => {
        var results = r.json();
        return results.assets.users.concat(results.assets.admins);
    }
}

有以下数据：

{
"assets": {
    "users": [
        { "name": "bob" }, { "name": "john" }
    ],
    "admins": [
        { "name": "jill" }, { "name": "donald" }
    ]

}

结果将等于：

[ { "name": "bob" }, { "name": "john" }, { "name": "jill" }, { "name": "donald" } ]

正如我对@Maximus 答案的评论中所解释的，.map() 用于将数组转换为新数组，这就是为什么您想向.map() 提供一个函数以告诉它您正在寻找什么数组。

【讨论】：