I am currently working on merging two observable objects into a single observable to access data from both. These observables represent documents from separate collections in a NoSQL database, specifically a Cloud Firestore database. Both collections have a common field with the same value (uid and partnerID). Initially, I created a query to retrieve the first observable object, which returns an Observable<{Object1}[]>. However, when attempting to add code to fetch the second observable object and merge it with the existing one, I end up with an
Observable<Observable<{Object1 merged with Object2}>[]>How can I ensure that the resulting observable is an array containing objects that are a combination of the two retrieved objects from the database?
The ultimate goal is to utilize this combined observable object within my Angular project, leveraging rxjs operators for this purpose.
This is the function within my service without the inclusion of the second observable object:
queryMatches(fieldNameOfRole, boolValueOfAccepted) {
return this.authService.user$.pipe(
switchMap(user => {
return this.angularFirestore
.collection('matches', ref => ref.where(fieldNameOfRole, '==', user ? user.uid : '')
.where('accepted', '==', boolValueOfAccepted))
.snapshotChanges()
.pipe(
map(actions => {
return actions.map(a => {
const data = a.payload.doc.data() as Match;
const matchId = a.payload.doc.id;
return { matchId, ...data };
});
})
);
})
);
}
As a result, the following is returned:
(method) MatchStoreService.queryMatches(fieldNameOfRole: any, boolValueOfAccepted: any): Observable<{
initiatorID: string;
partnerID: string;
matchedOffer: string;
accepted: boolean;
id: string;
}[]>
Here is how I attempted to combine it with the second observable object:
queryMatches(fieldNameOfRole, boolValueOfAccepted) {
return this.authService.user$.pipe(
switchMap(user => {
return this.angularFirestore
.collection('matches', ref => ref.where(fieldNameOfRole, '==', user ? user.uid : '')
.where('accepted', '==', boolValueOfAccepted))
.snapshotChanges()
.pipe(
map(actions => {
return actions.map(a => {
const data = a.payload.doc.data() as Match;
const matchId = a.payload.doc.id;
return { matchId, ...data };
});
})
);
}),
map(matches => {
return matches.map(match => {
return this.userStoreService.getUserById(match.partnerID).pipe(
map(user => {
return { ...match, ...user };
})
);
});
})
);
}
Following this approach, the following output is generated:
(method) MatchStoreService.queryMatches(fieldNameOfRole: any, boolValueOfAccepted: any): Observable<Observable<{
uid: string;
firstname: string;
lastname: string;
dateOfBirth: Date;
sex: string;
city: string;
activities: string[];
offers: string[];
mail?: string;
... 4 more ...;
matchId: string;
}>[]>
UPDATE
The implementation of getUserById():
getUserById(uid) {
return this.angularFirestore
.collection<any>(`users`)
.doc<User>(uid).valueChanges();
}