Expert wanted AngularFire2 firestore nested collection get data? - firebase

Question

Hey I couldn't find how can i do nested query in firestore ?
this.match1 = this.MatchCollection1.snapshotChanges().pipe(map(actions => {
return actions.map(a => {
const data = a.payload.doc.data() as Matches;
const uid = data.pairer;
const id = a.payload.doc.id;
const photourl = afs.collection(`users/${uid}/photos`,
ref => ref.where('index', '==', 0).where('deleted', '==', false)).snapshotChanges().pipe(map(action => {
return action.map(p => {
const pdata = p.payload.doc.data() as Photos;
return pdata.url;
});
}));
return {id, uid, url: photourl, ...data};
});
}));
My problem photourl return observable how can i do return object like others

Answer 1

A bit tricky to follow but I think all you need to do is move your return {id, uid, url: photourl, ...data}; From what I can see you are just missing a subscription to unpack your observable and extract the value. EG
return action.map(p => {
const pdata = p.payload.doc.data() as Photos;
return pdata.url;
});
})).subscribe(photo => {
"if you want to set photourl do it here photourl = photo.url;"
return photo; //do what you need to before you return the actual
photo object.
});

Answer 2

You can use toPromise method with async await.
Data structure
users
| userId1
| photos
| photoId1
| url : 'someURL'
| photoId2
| url : 'someURL2'
Service or component file
items;
getPhotos(uid){
return this.db.collection(`users/${uid}/photos`).valueChanges()
.pipe(first()).toPromise() // get first stream and return it as promise
}
async fooFunc() {
let user_id = 'userId1' //TODO: get user uid from somewhere
this.items = await this.getPhotos(user_id) // await getPhotos promise finish
console.log(this.items) // return [Object, Object]
}
component html template
<li *ngFor="let item of items">
{{ item | json }}
</li>
output
{ "url": "someURL" }
{ "url": "someURL2" }