CODEWITHSUNDEEP
javascriptangularfirebaseobservable
Alexander S.
Alexander S.

Reputation: 60

Get value of current Observable state

So I am trying to get the value (the email) of my Observable<firebase.User>. I know there is something called BehaviourSubject, but I cannot use it since firebase.User requires an Observable, it seems.

retrieveUserData(){
    let emailVal = "";

    this.userData.subscribe(
      {
        next: x =>  emailVal += x.email  && console.log(x.email),
        error: err => console.error('Observer got an error: ' + err),
        complete: () => console.log('Observer got a complete notification'),
      }
    );
    return emailVal;
}

So my goal is to get x.email in the emailVal let, in order to pass it & display, for example.

The problem is, that I am getting an (by logging the whole method retrieveUserData()), but the console.log(x.email) always returns the value I am looking for.

Why is that & is there a way to get the value & store it in a string, let or something else?

Upvotes: 0

Views: 806

Answers (1)

ilkengin
ilkengin

Reputation: 301

It is because Observables are async. It means when you run subscribe method of the observable, it runs the command without blocking the current runtime. Also, you are assigning the value of emailVal when the observable is run but you return the value without waiting for the assignment to be happened.

What you can do?

  • You can keep a global variable to keep the email globally and use that variable to display the email in the html side.

    @Component({
    selector: "my-app",
    // See here, I used emailVal to display it
    template: "<span>{{emailVal}}</span>",
    styles: [""]
})
export class TestComponent {
      emailVal = "";

      ngOnInit(): void {
          this.retrieveUserData();
      }

      retrieveUserData(): void {
          this.userData.subscribe(
              x => this.handleData(x.email),
              err => console.error("Observer got an error: " + err)
          );
      }

      handleData(email) {
          // Here, we assign the value of global variable (defined in class level)
          this.emailVal = email;
          console.log(email);
      }
}

  • You can use rxjs library in such a way to make the observable return the value and return the observable in the method as below

     retrieveUserData(): Observable<firebase.User> {
     return this.userData.pipe(
       map(x => x.email)
     );
 }

    And in html side, using async pipe (as an example):

    <span>{{retrieveUserData() | async}}</span>

    async pipe will subscribe to observable and wait for it to complete and then take the value and put it in the value of span. You can check this StackBlitz example to understand this method deeply.

Upvotes: 1

Related Questions