Working with Angular (Version 7) and RxJS, I am making two API calls which return observables that I subscribe to.
Now, the challenge is combining these subscriptions as the data from both observables are interdependent. This is necessary to implement certain functions such as a filter that checks if the id received from subscription2 appears in subscription1 before returning something.
Due to the extensive length of my code, I have provided a condensed sample version with key points marked by comments:
getSomething(){
/**
* anIdFromSubscriptionTwo: An essential id required from subscription2
*/
const subscription1 = this.service.getSomeStuff().subscription((someStuff) => {
this.someStuff = stuff;
this.someStuff.forEach((stuff) => {
if(stuff.someProperty !== null && stuff.id === anIdFromSubscriptionTwo){
...
}
});
}
/**
* aIdFromSubscriptionOne: Id of type string obtained within forEach loop of subscription1
* aTypeFromSubscriptionOne: Type of string retrieved within forEach loop of subscription1
*/
const subscription2 = this.service.getSomeOtherStuff(aIdFromSubscriptionOne: string, aTypeFromSubscriptionOne: string).subscription((someOtherStuff) => {
this.someOtherStuff = someOtherStuff;
this.someOtherStuff.forEach(() => {
// Sole if statement needed after merging the two subscriptions
if(subscription1.stuff.someProperty !== null && subscription1.stuff.id === someOtherStuff.id){
const properties: Image = {
id: // id needed from subscription1
class: // class required from subscription1
type: // type needed from subscription2
ref: // reference to image URL from subscription2
...
}
}
})
});
}
How can I effectively combine these two subscriptions to access their data in my forEach loop for comparison or general manipulation?