Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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!

like image 421
cup_of Avatar asked Jun 20 '18 15:06

cup_of


People also ask

Does subscribe wait for response Angular?

Basically the console. log(this. newIds) is runned first and is always empty because the subscribe doesn't wait for response to come from the backend.

What happens if you don't subscribe to an observable?

Remember, observables are lazy. If you don't subscribe nothing is going to happen. It's good to know that when you subscribe to an observer, each call of subscribe() will trigger it's own independent execution for that given observer. Subscribe calls are not shared among multiple subscribers to the same observable.

What does subscribe () do in Angular?

Subscribe() is a method in Angular that connects the observer to observable events. Whenever any change is made in these observable, a code is executed and observes the results or changes using the subscribe method.


2 Answers

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);
  }
}
like image 122
Sachila Ranawaka Avatar answered Oct 20 '22 20:10

Sachila Ranawaka


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

}
like image 23
Aniruddha Das Avatar answered Oct 20 '22 21:10

Aniruddha Das