I've been attempting to utilize mergeMap in order to solve this particular issue, but I'm uncertain if my approach is correct.
Within my code, there exists a method named getNumbers(), which makes an HTTP request and returns a list of numbers (Observable<number[]>).
Additionally, I have a service that includes another method called getData(). This method also makes an HTTP request, but it retrieves data specific to a given number (Observable).
The objective is to execute the first request, and for each number within the result, initiate the second request. All these requests should occur concurrently without waiting for a response. Furthermore, the logic executed after each request is precisely identical.
Presently, I have devised a solution for this scenario, albeit one that does not employ rxjs:
this.getNumbers().subscribe((nums: number[]) => {
nums.forEach((num: number) => {
this.myService.getData(num).subscribe((response: Data) => {
this.rows.push(response);
})
})
});
While this implementation produces the desired behavior, it employs nested subscriptions and leaves me unable to determine whether or not the loop has properly concluded. Unfortunately, I require the utilization of rxjs in order to address this issue since I possess a loading spinner that must be set to false once all the calls in the loop are complete.
Hence, how can I restructure this code adequately? Thank you!