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

Question

Hello I am having an issue with my variables being undefined. I am certain this is because the observable hasnt 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, if I need to provide more code and context let me know. 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. Im sure this is because the subscribe hasnt finished before I try to access myVariable

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

Thanks!

Solution 1

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);
  }
}

Solution 2

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()
    });
  }

}

Comments

[cup_of]

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]

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

[Rin and Len]

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?

[Rin and Len]

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]

and what if the subscriber if written in service class?