I am facing a challenge that involves retrieving data from Firestore using angularfire. Once I fetch a collection, I need to iterate through each document in the collection and then make a separate request to Firestore to get additional document values. These values will then be inserted into the original document before returning the updated collection.
Let's consider an object called ball with the properties:
interface Ball: {
uid: string;
color: string;
}
And an object player with the properties:
interface Player: {
uid: string;
correspondingBall: ball;
}
In the Firestore collection, I store documents of type Player with IDs referencing the respective balls they correspond to. Now, I want to access the player collection:
getRecentPlayers(): Observable<Player[]> {
const players: AngularFirestoreCollection<any> = this.angularFirestore.collection<Player>('players');
return players ? players.snapshotChanges().pipe(
map(players => {
return players.map(player => {
const data = player.payload.doc.data() as Player;
const correspondingBall: AngularFirestoreDocument<Ball> = this.angularFirestore.doc('balls/' + data.correspondingBall);
correspondingBall ? correspondingBall.snapshotChanges().pipe(
map(ball => {
const data = ball.payload.data() as Ball;
return data;
})
) : null;
return {...data, correspondingBall}
})
})
) : null;
}
However, my current approach is not working as expected. Can anyone provide guidance on how to resolve this issue? Thank you!