Angular 2+ wait for subscribe to finish to update/access variable

Question

I am having an issue with my variables being undefined. I am certain this is because the observable hasn't finished. Here is the part of my code in my .ts file that is causing the issue. (I'm placing the minimum code required to understand the issue. Also myFunction gets called from a click event in the HTML).

export class myClass { myVariable: any; myFunction() { this.myService.getApi().subscribe(data => { this.myVariable = data; }); console.log(myVariable) --> undefined } }

So this piece of code calls a function in my service that returns some data from an API. The issue is that when I try to access the variable myVariable right outside of the subscribe function it returns undefined. I'm sure this is because the subscribe hasn't finished before I try to access myVariable

Is there a way to wait for the subscribe to finish before I try to access myVariable?

Sachila Ranawaka · Accepted Answer · 2018-06-20 15:28:01Z

18

why not create a separate function and call it inside the subscription.

export class myClass { myVariable: any; myFunction() { this.myService.getApi().subscribe(data => { this.myVariable = data; this.update() }); this.update() } update(){ console.log(this.myVariable); } }

answered Jun 20, 2018 at 15:28

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cup_of Over a year ago

this seems to work for me. thanks! one quick question, why does there need to be two instances of this.update()? one in the subscribe and one outside of it

Sachila Ranawaka Over a year ago

you can remove it if you want. i add it in case if you want to call it on component initialize

Rin and Len Over a year ago

myVariable when I try this method returns undefined in myFunction and then null in update() . What is the expected result of myVariable and should it be possible to get a status code (201/4, post request) from it? Obviously, undefined and null throw an error when using myVariable.status

TAHA SULTAN TEMURI Over a year ago

and what if the subscriber if written in service class?

Aniruddha Das · Accepted Answer · 2018-11-06 17:34:33Z

As you know subscriptions are executed when server return data but the out side of subscription code executed synchronously. That is why console.log outside of it executed. The above answer can do your job but you can also use .map and return observable as shown below.

let say you are calling it from s service

export class myClass { myVariable: any; // calling and subscribing the method. callingFunction() { // the console log will be executed when there are data back from server this.myClass.MyFunction().subscribe(data => { console.log(data); }); } } export class myClass { myVariable: any; // this will return an observable as we did not subscribe rather used .map method myFunction() { // use .pipe in case of rxjs 6 return this.myService.getApi().map(data => { this.myVariable = data; this.update() }); } }

Is the 2nd block of code the service and the 1st block the component that calls the service? What is the update function doing if anything, and why do I need it?

Collectives™ on Stack Overflow

Angular 2+ wait for subscribe to finish to update/access variable

2 Answers 2

4 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Linked

Related