Why can I not access an array element when I fill the array during subscribe?

Question

orderedAnalysis.forEach((analysis) => {
                this.analysisCenterService.getAnalysisDetails(analysis.id).subscribe(detail => {
                    analysis.detailed = detail;
                });
            });
console.log(orderedAnalysis[0]);

This is the result of the log statement:

But when I log orderedAnalysis[0].detailed the result will be undefined.

Why does this happen and how do I do this propely?

is getAnalysisDetails function an async operation like an http call? because your console.log statement will not print out the result — Ian Middelkamp, Dec 30 '19 at 13:29

StepUp · Answer 1 · 2019-12-30T14:01:19.237

1

It happens because HTTP call is asynchronous. So your code would looks like this:

orderedAnalysis.forEach((analysis, i) => {                    
     this.analysisCenterService.getAnalysisDetails(analysis.id)
        .subscribe(detail => {
                    analysis.detailed = detail;
                    console.log(analysis);
        });
});

UPDATE:

You can use async operator to await result your API call:

 async fooFunction() 
 {
     orderedAnalysis.forEach((analysis, i) => {                    
        let result = await this.analysisCenterService.getAnalysisDetails(analysis.id);
        analysis.detailed = result;
     });
     console.log(orderedAnalysis);
 }

If return type of getAnalysisDetails is Observable, then you can convert to Promise using .toPromise method:

 let result = await this.analysisCenterService.getAnalysisDetails(analysis.id).toPromise();

edited Dec 30 '19 at 14:01

answered Dec 30 '19 at 13:27

StepUp

36,391
15
88
148

how can i use orderedAnalysis after subscribe done ? – Mhammed Zghoul Dec 30 '19 at 13:31
@MhammedZghoul please, see my updated answer – StepUp Dec 30 '19 at 13:41
How can I use `async/await` in subscribe? – Ali Wahab Dec 30 '19 at 13:58
`async/await` works with promises, subscribe in angular is of Observable type. – Ali Wahab Dec 30 '19 at 13:59
@AliWahab please, see my updated answer – StepUp Dec 30 '19 at 14:01
1

@StepUp glad that you made changes. – Ali Wahab Dec 30 '19 at 14:11

Why can I not access an array element when I fill the array during subscribe?

1 Answers1