I am piping into an observable, that streams an array of let's say food. I need to get the latest cook, the latest kitchen, and the latest knife used to prepare each of these food items. These three values are all values got by an observable like getCookById(food.cook.id). How could i map it so:
{
foodItem,
cook,
kitchen,
knife
}
Currently, I get an array of empty items doing it like so :
const foodObservable = new Subject();
foodObservable.pipe(
map(foodItems => {
return foodItems.map((foodItem: any)=>{
const cookObservable = new Subject();
const kitchenObservable = new Subject();
const knifeObservable = new Subject();
combineLatest(cookObservable, kitchenObservable, knifeObservable).subscribe(([cook, kitchen, knife]) => {
return {
foodItem,
cook,
kitchen,
knife
};
});
})
})
).subscribe(foodPreparationArray=>{
console.log(foodPreparationArray) // array of empty values :(
})Based on your condition and your comment, I'd suggest the following changes
You'd need to use a higher order mapping operator like switchMap to map from one observable to another. map operator is used to transform the emitted data.
Using Firebase get() instead of valueChanges() would be a better fit. I assume you need the value at the moment and do not need to observe any changes to the property. See here for more info.
Using get() instead of valueChanges() provides us with us observables that completes instead of streaming. So you could replace the combineLatest with forkJoin.
You'd need two forkJoins. First forkJoin is to trigger requests for each element of the foodItems array and second forkJoin is to trigger requests for cook, knife, and kitchen simultaneously.
Finally you could use the map operator to combining everything.
Try the following
foodObservable.pipe(
switchMap((foodItems: any) => // <-- RxJS `switchMap` operator
forkJoin(
foodItems.map((foodItem: any) => // <-- JS `Array#map` function
forkJoin({
cook: db.collection('cook').doc(foodItem.cookId).get(),
kitchen: db.collection('kitchen').doc(foodItem.kitchenId).get(),
knife: db.collection('knife').doc(foodItem.knifeId).get()
}).pipe(
map(({cook, kitchen, knife}) => ({ // <-- RxJS `map` operator
...foodItem, // <-- spread operator
cook: cook,
kitchen: kitchen,
knife: knife
)})
)
)
)
)
).subscribe({
next: (foodPreparationArray: any) => {
console.log(foodPreparationArray);
},
error: (error: any) => {
// handle error
}
});