Angular: Implementing conditional HTTP requests within a loop

Question

Angular: Implementing conditional HTTP requests within a loop

Currently, I am facing a challenge where I need to loop through an array of objects, check a specific property of each object, and if it meets certain criteria, make an HTTP request to fetch additional data for that object.

The code snippet below represents how I initially approached the problem:

public refreshParticipants(housingTransactionId: string): Observable<Array<Participant>> {
    const url: string = `${config.apiBaseUrl}`;

    this.authHttpService.get(url)
        .subscribe(response => {
            let participants = response.json().map(p => Participant.createFromResponse(p));

            participants.forEach(participant => {
                if (participant.isBusinessUser) {
                    this.getParticipantBranchFromHousingTransaction(participant.id, housingTransactionId)
                        .subscribe((branch) => {
                            participant.branchId = branch.id;
                        })
                }
                this.participants.push(participant);
            });

            return Observable.of(this.participants);
        });

Despite my effort, the issue arises from requests not being executed in sequence, causing this.participants to remain empty.

I am currently seeking advice on how to implement the logic in such a way that this.participants includes both objects that required additional HTTP data and those that did not.

angular typescript observable

Answer 1

Answer №1

To streamline your process, consider utilizing a single observable to handle all of your data:

this.authHttpService.get(url).pipe(
    flatMap((response) => {
        let participants = response.json().map(p => participant.createFromResponse(p));             
        let partDataRequests: Observable<Participant>[] = [];
        participants.forEach((participant) => {
            if (participant.isBusinessUser) {
                partDataRequests.push(this.getParticipantBranchFromHousingTransaction(participant.id, housingTransactionId).map((branch) => { participant.branchId = branch.id; return participant; });
            } else {
                partDataRequests.push(of(participant));
            }
        });
        return forkJoin(partDataRequests);
    })
).subscribe((enrichedParticipants) => {
    this.participants = enrichedParticipants;
});

(In the context of rxjs v6, the syntax provided will work. For rxjs v5 and other versions, adjustments may be necessary but the core ideas remain consistent)

Answer 2

To streamline your process, consider utilizing a single observable to handle all of your data:

this.authHttpService.get(url).pipe(
    flatMap((response) => {
        let participants = response.json().map(p => participant.createFromResponse(p));             
        let partDataRequests: Observable<Participant>[] = [];
        participants.forEach((participant) => {
            if (participant.isBusinessUser) {
                partDataRequests.push(this.getParticipantBranchFromHousingTransaction(participant.id, housingTransactionId).map((branch) => { participant.branchId = branch.id; return participant; });
            } else {
                partDataRequests.push(of(participant));
            }
        });
        return forkJoin(partDataRequests);
    })
).subscribe((enrichedParticipants) => {
    this.participants = enrichedParticipants;
});

(In the context of rxjs v6, the syntax provided will work. For rxjs v5 and other versions, adjustments may be necessary but the core ideas remain consistent)

Answer 3

Answer №2

The problem arises when the participant is pushed before receiving a response from the subscription. To resolve this, simply move the push line inside the subscription block as shown below:

    participants.forEach(participant => {
         if (participant.isBusinessUser) {
             this.getParticipantBranchFromHousingTransaction(participant.id, housingTransactionId)
               .subscribe((branch) => {
                  participant.branchId = branch.id;
                  this.participants.push(participant);
               });
          } else {
            this.participants.push(participant);
          }
    });

Answer 4

The problem arises when the participant is pushed before receiving a response from the subscription. To resolve this, simply move the push line inside the subscription block as shown below:

    participants.forEach(participant => {
         if (participant.isBusinessUser) {
             this.getParticipantBranchFromHousingTransaction(participant.id, housingTransactionId)
               .subscribe((branch) => {
                  participant.branchId = branch.id;
                  this.participants.push(participant);
               });
          } else {
            this.participants.push(participant);
          }
    });

Answer 5

Answer №3

Are you in need of this specific information?

    Making a request to retrieve data from the provided URL using authHttpService.
        The response is then processed, with participants being created based on the returned data.

        Each participant is checked for being a business user. If true, an additional request is made 
        to fetch branch information related to housing transactions.

        Ensure all requests are completed before finalizing the array of participants.

It's important to note that the array won't be completed after the forEach loop ends, but rather when all responses have been received.

Answer 6

Are you in need of this specific information?

    Making a request to retrieve data from the provided URL using authHttpService.
        The response is then processed, with participants being created based on the returned data.

        Each participant is checked for being a business user. If true, an additional request is made 
        to fetch branch information related to housing transactions.

        Ensure all requests are completed before finalizing the array of participants.

It's important to note that the array won't be completed after the forEach loop ends, but rather when all responses have been received.

Angular: Implementing conditional HTTP requests within a loop

Answer №1

Answer №2

Answer №3

Similar questions

Issue with Moment Js: Unable to change date with time zone function

The promise briefly returns a placeholder object before resolving with the actual response

An issue with the animation script in Ionic

Instructions for enabling the touch slider feature in the Igx carousel component with Angular 6 or higher

Creating an if statement based on the currently chosen option

Is there a way to deactivate a tab when it's active and reactivate it upon clicking another tab in Angular?

Form for creating and updating users with a variety of input options, powered by Angular 2+

The interface IJobDetails cannot be assigned to type null

Is there a way to search for text and highlight it within an HTML string using Ionic

Using Angular to Generate a File from Form Input and Delivering it to the User

Using RouterLink in a div component with Angular's router version 3.0.0-alpha.3

Exploring the Wonderful World of Styled Components

What is the method to acquire the firestore reference type in TypeScript?

Tips on using class-validator @isArray to handle cases where only a single item is received from a query parameter

TypeError thrown by Basic TypeScript Class

Combining Different Types of Errors

What is the process of combining two states in Angular?

Glitch causing incorrect images to appear while scrolling through FlashList

Troubleshooting the issue of Angular Reactive Forms Select Option not properly selecting pre-defaulted objects

Testing an asynchronous function in JavaScript can lead to the error message: "Have you neglected to utilize await?"