Asynchronous calls in Angular

Question

Probably a naive question but I wanted to understand, and that's why posting the question.

I have to make three different API calls and store some values in an array. I am using this to achieve that:

getNodeDetails() {
 this.httpClient
        .get<string[]>(this.nodeURL)
        .subscribe(res => {
                                this.nodeCount = Object.keys(res).length;
                       Object.values(res).forEach(value => {
                             this.nodeArray.push(value);
                         });
                       this.getTotalTransactions();
                });
}

getTotalTransactions(): void {
      this.httpClient
        .get(this.transactionURL)
        .subscribe((data) => {
                     this.numberOfTransactions = data.length;
                     data.forEach(apiData => {
                    this.totalUniqueTransactionId.push(apiData.uniqueTransactionId);
                    this.dateArray.push(apiData.requestTime);
                });
                     this.totalUniqueTransactionId.forEach(transactionId =>
                                this.column1.push(transactionId.substr(0, transactionId.indexOf('-'))));
        });

      let newData: any = [];

         this.nodeArray.forEach(node => {
                   this.httpClient.get(this.URL1 + node).subscribe(data => {
                    console.log(data);
                    this.dynamicColumns.push(data);
                });
         });
         this.getDataMapping();
    }

Now the problem that I am facing is that these calls need to be in such a way that I need all the data before I render the table. I am getting the response, but I want to make it in such a way that I need to obtain the results for the API before calling the getDataMapping() function.

Can anyone advise me for the same?

EDIT : since the API is called in the loop, arrays needed to be received before processing the furthur logic. This is what I couldn't find while searching over.

Thanks

@IsmailSahin I couldnt understand the use case that you marked as a duplicate with. Could you explain the same. Thanks — dper, Aug 06 '19 at 08:10
Possible duplicate of [Angular2: How to load data before rendering the component?](https://stackoverflow.com/questions/35655361/angular2-how-to-load-data-before-rendering-the-component) — Liam, Aug 06 '19 at 08:13

score 0 · Answer 1 · answered Aug 06 '19 at 08:30

you can define three booleans:

gotNodeDetails = false
gotTotalTransactions = false
gotDataMapping = false

after 1 and 2 booleans are true, you can call:

this.getDataMapping();

and you can use a ngif for rendering your table with boolean 3.

<div *ngIf="gotDataMapping">Content to render when condition is true.</div>

Asynchronous calls in Angular

1 Answers1