How to convert observable of array of observables of data into observable of an array of data

user_8757529 0
Viewed 138

I'm a beginner, doing my Ionic project with Firebase Firestore.
There will be two types of client, group A and group B.
It is a social media application which people from A can be friend people from B and vice versa, but not from the same group.

As I'm querying the data for user from group A, there will be connected users in group B in the user's data.

So my code is like in the form of:

this.items = this.firestore.collection<Data>('a_users',ref => ref.where('UID','==',getUID()).valueChanges().map(
  users => users[0].conn.map(conn_id => {
    return this.firestore.collection<Data>('b_users', ref => ref.where('UID','==',conn_id)).valueChanges().map(b => b[0]);
  })
)

It will return Observable<Observable<Data>[]> but when I tried to display in an ion-list in HTML using async pipe, the result is #undefined.

The goal is to display the above data properly (with an immediate response when an item changes) in an ion-list.

ionic3 rxjs ionic-framework google-cloud-firestore firebase
1 Answers

Think you have to use async pipe twice in order to map to data change

this.items = this.firestore.collection<Data>('a_users',ref => ref.where('UID','==',getUID()).valueChanges().map(
  users =>users[0].conn.map(conn_id => {
    return this.firestore.collection<Data>('b_users', ref => ref.where('UID','==',conn_id)).valueChanges().map(b => b[0]);
  })
)

html 

  <ion-list *ngFor="let user of users | async"> 
     <strong> {user.props | async}</strong>
  </ion-list>
user_86183500
Related