如何将每个用户对象合并到一个数组的可观察对象？答案

【问题标题】：How to merge each user object to an observable of an array?如何将每个用户对象合并到一个数组的可观察对象？
【发布时间】：2017-12-15 09:16:58
【问题描述】：

我的问题是，我应该使用哪些映射运算符将每个对象转换为数组？

首先，我从朋友节点检索用户密钥，如下图所示。

我想使用这些密钥从用户节点获取我的朋友列表。但是，结果会作为单独的对象返回，如下图所示。

因此，我无法迭代这些数据来显示视图。

我不确定这种方法是否正确。

这是我到目前为止所做的代码。

    getMyFriendList() {
      this.userService.getMyFriendKeys().switchMap(data => {
        console.log('TEST', data);
        return data;
    }).subscribe(friend => {
      this.userService.getFriends(friend.key).subscribe(res => {
        console.log('TEST2', res);
        // res is an objects
      });
    });
  }

friends.json：

{
  "5NnRVze6TVUeunLV0KXVmLby03J2": {
    "VkwT5IgS7ZYqDZ4uz5Dh76inrAK2": true,
    "dm8o0podI3gou0ob3wirkiyOGOu1": true
  },
  "VkwT5IgS7ZYqDZ4uz5Dh76inrAK2": {
    "5NnRVze6TVUeunLV0KXVmLby03J2": true
  },
  "dm8o0podI3gou0ob3wirkiyOGOu1": {
    "5NnRVze6TVUeunLV0KXVmLby03J2": true
  }
}

Users.json：

{
  "5NnRVze6TVUeunLV0KXVmLby03J2": {
    "currentActiveStatus": "online",
    "displayName": "Jeff Kim",
    "email": "ziznzkak@gmail.com",
    "photoURL": "https://firebasestorage.googleapis.com/v0/b/chattycherry-3636c.appspot.com/o/user-default.png?alt=media&token=f85be639-9a1c-4c79-a28d-361171358a41",
    "statusMessage": "",
    "uid": "5NnRVze6TVUeunLV0KXVmLby03J2",
    "username": "helloworld"
  },
  "VkwT5IgS7ZYqDZ4uz5Dh76inrAK2": {
    "currentActiveStatus": "offline",
    "displayName": "John Doe",
    "email": "hahehaheha@naver.com",
    "photoURL": "https://firebasestorage.googleapis.com/v0/b/chattycherry-3636c.appspot.com/o/profilepics%2FVkwT5IgS7ZYqDZ4uz5Dh76inrAK2?alt=media&token=e9c2a8dc-5a10-42a7-a9c9-b28d53776f12",
    "statusMessage": "programming is awesome!",
    "uid": "VkwT5IgS7ZYqDZ4uz5Dh76inrAK2",
    "username": "hello"
  },
  "dm8o0podI3gou0ob3wirkiyOGOu1": {
    "currentActiveStatus": "offline",
    "displayName": "Sia ",
    "email": "ziznzkak4@daum.net",
    "gender": "Female",
    "photoURL": "https://firebasestorage.googleapis.com/v0/b/chattycherry-3636c.appspot.com/o/profilepics%2Fd65DhlrcCGaayOBaF2siVhauQbq1?alt=media&token=19e2b040-0fd9-4f59-9d56-406a817f58a3",
    "statusMessage": "Hmm?",
    "uid": "dm8o0podI3gou0ob3wirkiyOGOu1",
    "username": "hellowo"
  }
}

【问题讨论】：

能否正确提供getMyFriendKeys()返回的body的json格式。和getFriends()返回的一个@

标签： javascript firebase rxjs

【解决方案1】：

你可以使用Object.keys():

如果你想并行调用getFriends()并获取朋友的所有详细信息，你可以使用Observable.forkJoin()：

this.userService.getMyFriendKeys()
    .switchMap(data => {
        return Observable.forkJoin(Object.keys(data).map(x => this.userService.getFriends(x.key)));
    })
    .subscribe(friends => {
        //friends is an array of items
        console.log(friends[0].displayName)//gives John Doe
    })

诀窍是在调用.getMyFriendKeys() 后使用.map() 返回一个Observables 数组。注意这个.map() 是数组的函数，而不是observables。

【讨论】：

感谢您对 CozyAzure 的回答。但是控制台上什么也没有打印出来。
你能检查服务是否正在获取数据吗？检查控制台中的网络选项卡。如果你能提供你的数据结构的json格式也很好
我已经编辑了你的问题并更新了我的答案
不过，它什么也没给 :(
@JeffMinsungKim 如果这些服务被触发，您需要检查您的网络选项卡。请注意，Observable.forkjoin() 会等待 all http 请求完成，然后才会发出发射

【解决方案2】：

我自己想出来的。我应该使用 combineLatest() 方法。首先，从 firebase 中提取两个不同的对象 observable，然后将 Friends 对象 observable 组合成一个名为 this.friends 的新 observable。这会产生一个带有数组的 observable，我可以在模板中对其进行迭代。

感谢您对 CozyAzure 的帮助。

    getMyFriendList() {
      this.userService.getMyFriendKeys().switchMap(data => {
        return Observable.combineLatest(data.map(x => this.userService.getFriends(x.key)));
    }).subscribe(friends => {
        this.friends = friends;
    });
  }

【讨论】：