Angular asynchronous calls nested within each other

Question

Angular asynchronous calls nested within each other

I'm facing an issue with a function that calls a service to retrieve data via an API. The goal is to make another call with an updated offset if the result equals 50 after the first call. However, despite my efforts, it seems like it doesn't enter the arrow function as expected:

result: any[] = []

   async getData(v) {
      await this.gs.getMaxGifs(v, this.offset).subscribe((response: any) => {
      this.result.push(...response.data);
      this.offset += 50;
      if (this.result.length % 50 == 0) {
          console.log('DENTRO')
          async () => {
            await this.gs.getMaxGifs(v, this.offset).subscribe((response: any) => {
              console.log('DENTRO22222')
            })
            this.result.push(...response.data);
            this.offset += 50;
          }
      }
      console.log(this.result.length)
    });
  }

https://i.sstatic.net/RziOM.png

Once I get this part working, my plan is to replace the if statement with a while loop. But when I tried to add it now, it resulted in an infinite loop.

angular typescript

Answer 1

Answer №1

It successfully worked for sirss,

When looking at the code snippet, we can see that the asynchronous function getData is being called with a parameter v. Inside this function, there is a call to this.gs.getMaxGifs which returns an Observable. Upon subscribing to this Observable, it pushes the response data into a result array and increments the offset by 50. If the length of the result array is divisible by 50, it logs 'DENTRO' to the console and recursively calls getData with the same parameter v.

Answer 2

It successfully worked for sirss,

When looking at the code snippet, we can see that the asynchronous function getData is being called with a parameter v. Inside this function, there is a call to this.gs.getMaxGifs which returns an Observable. Upon subscribing to this Observable, it pushes the response data into a result array and increments the offset by 50. If the length of the result array is divisible by 50, it logs 'DENTRO' to the console and recursively calls getData with the same parameter v.

Answer 3

Answer №2

result: any[] = []

 processInformation(v) {
  this.gs.fetchGifsData(v, 
   this.offset).subscribe((response: any) => {
  this.result.push(...response.data);
  this.offset += 50;
  if (this.result.length % 50 == 0) {
      console.log('INSIDE')
      
        this.gs.fetchGifsData(v, this.offset).subscribe((response: any) => {
          console.log('INSIDE AGAIN')

        
        this.result.push(...response.data);
        this.offset += 50;
      }
  }
  console.log(this.result.length)
});
}

Alternatively, to achieve the same result recursively, you can use the following approach:

    result: any[] = []

 processInformation(v) {
  this.gs.fetchGifsData(v, 
   this.offset).subscribe((response: any) => {
  this.result.push(...response.data);
  this.offset += 50;
  if (this.result.length % 50 == 0) {
      this.processInformation(v)
  }
  console.log(this.result.length)
});
}

Answer 4

result: any[] = []

 processInformation(v) {
  this.gs.fetchGifsData(v, 
   this.offset).subscribe((response: any) => {
  this.result.push(...response.data);
  this.offset += 50;
  if (this.result.length % 50 == 0) {
      console.log('INSIDE')
      
        this.gs.fetchGifsData(v, this.offset).subscribe((response: any) => {
          console.log('INSIDE AGAIN')

        
        this.result.push(...response.data);
        this.offset += 50;
      }
  }
  console.log(this.result.length)
});
}

Alternatively, to achieve the same result recursively, you can use the following approach:

    result: any[] = []

 processInformation(v) {
  this.gs.fetchGifsData(v, 
   this.offset).subscribe((response: any) => {
  this.result.push(...response.data);
  this.offset += 50;
  if (this.result.length % 50 == 0) {
      this.processInformation(v)
  }
  console.log(this.result.length)
});
}

Angular asynchronous calls nested within each other

Answer №1

Answer №2

Similar questions

How can I prevent the creation of undefined fields in Typescript when initializing a new object?

How can I stop TypeScript from causing my builds to fail in Next.js?

Laravel 5.4 integrates with Angular4: Implementing Passport token requests

React with Typescript prop is functioning well, despite displaying an error

The module '@angular/cdk/testing' cannot be located

Which is better: Utilizing ASP.NET Core or ASP.NET Core MVC in tandem with Angular for the

The method to permit a single special character to appear multiple times in a regular expression

Unable to utilize a service from a module that is shared when leveraging ClientsModule.registerAsync() functionality

Getting environment variables on the client side in Next.js: A step-by-step guide

Ported an Angular application to Android with the help of Cordova. The APK successfully launches on the emulator, however, when tested on a physical device, only a blank

Error: We were unable to recognize the syntax in /service-details/1139#overview for Angular 5

Styling in Angular 4 based on conditions

Encountering a Geolocation API issue during the troubleshooting of an Angular application on

Encountering the "DevToolsActivePort file does not exist" error when executing Angular e2e tests via GitHub Actions

What is the proper way to specify the type for the iterable response of Promise.all()?

Incorporate a visual element into an Angular Library Component Template using an image asset

Can you explain the significance of the colon in this context?

Is it possible to retrieve the precise key currently indexed within type declaration?

Updating a URL parameter in Angular using programmatic methods

Why is TypeScript unable to locate the identifier 'Express'?