Issue with asynchronous angular requests

Question

How to handle asynchronous calls in angular. I know i am getting array as undefined due to asynchronous nature but how do i solve it


private fetchData(id){
   var array = [];
   this.httpClient.get('someUrl/'+id).subscribe((organisation)=>{
      console.log(organisation.teams);   // ['team1','team2','team3']
      organisation.teams.forEach((team)=>{
          this.httpClient/get('someUrl/'+team).subscribe((teamData)=>{
             array.push(teamData);
          })
       })
       console.log(array);    // undefined
    })
}

what did you get while console logging teamData, before pushing into array? — GokulnathP, Mar 16 '21 at 07:04
[Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/q/23667086) — VLAZ, Mar 16 '21 at 07:06
maybe you can add `if(array) {console.log(array)}` and see if it's returned as it'll only call when there's a value — Belle Zaid, Mar 16 '21 at 07:46

score 0 · Answer 1 · answered Mar 16 '21 at 07:46

Your code seems to work fine and you are correctly using the subscribe functionality. The reason you log undefined is that the console.log(array) line is called before the get request to 'someUrl'+team has returned a value. To check this you can move the console.log(array) line inside the scope of the subscription (where the array.push(teamData) line is).

A more modern way of writing this with less indentation is to use async/await:

private async fetchData(id){
   var array = [];
   let organisation = await this.httpClient.get('someUrl/'+id).toPromise();
   console.log(organisation.teams);   // ['team1','team2','team3']
   let teamData;
   organisation.teams.forEach((team)=>{
       teamData = await this.httpClient/get('someUrl/'+team).toPromise()
       array.push(teamData);
   })
   console.log(array);
}

Issue with asynchronous angular requests

1 Answers1