rxjs: How to fetch related data from Firestore - firebase

Question

I'm trying to fetch some related data based on the values returned by an observable from Firestore.
getChampionshipResults(minimumCompetionCount: number): Observable<User[]> {
const usersWithResults = this.afs.collection<User>('users')
.valueChanges()
.map(users => {
return users.map(user => {
this.afs.collection<Result>('results', ref => ref
.where('userUid', '==', user.uid)
.orderBy('position', 'asc')
.limit(minimumCompetionCount))
.valueChanges()
.take(1)
.subscribe(results => {
user.results = results;
});
return user;
});
})
.do(el => console.log(el));
return usersWithResults;
}
this gives me the correct results:
output
But I want to do some advanced sorting / filtering on the usersWithResults observable. The problem is that the user.results property is undefined at the time I want to sort it:
getChampionshipResults(minimumCompetionCount: number): Observable<User[]> {
const usersWithResults = this.afs.collection<User>('users')
.valueChanges()
.map(users => {
return users.map(user => {
this.afs.collection<Result>('results', ref => ref
.where('userUid', '==', user.uid)
.orderBy('position', 'asc')
.limit(minimumCompetionCount))
.valueChanges()
.take(1)
.subscribe(results => {
user.results = results;
});
return user;
});
})
.do(el => console.log(el))
// add sorting
.map(users => {
return users.sort((a, b) => {
// this is undefined
console.log(a.results);
// simplified dummy sort
return 1;
});
});
return usersWithResults;
}
I think the issue is coming from the fact that the inner observable has not completed, but I can't find the correct rxjs operator to do what I want.
Any advice would be appreciated.
Thanks.