CODEWITHSUNDEEP
angularasynchronousangular2-servicesangular2-observables
Jie Hart
Jie Hart

Reputation: 909

How to wait for a subscription to complete angular

I have a auth service and I want to retrieve the users record from firebase using angularfire before it returns but the data is returned too late. I added ".filter(data => data !== undefined)" but it did not cause it to wait.

this.authState = this.afAuth.authState;
this.authState.subscribe(user => {
  if (user) {
    this.currentUser = user;
    this.userid = this.currentUser.uid;
    this.displayname = this.currentUser.displayName;
    this.path = '/AU/user/' + this.currentUser.uid + '/';
    this.exists = this.af.object(this.path);
      // this line of code returns data after the navbar 
      // and user components have started which is too late.
      // The filter was added to try to get it wait for the data.
    this.exists.filter(data => data !== undefined).subscribe(x => {

      if (x && (x.$value !== null)) {
        this.mobile = x.mobile;
        this.userid = x.userid;
        this.name = x.name;
        this.email = x.email;
        this.confirm = x.confirm;
          // the fields below are undefined in the console log
        console.log( 'email', this.email, 'name', this.name)
      } else {
        this.currentUser = null;
      }
  });

While googling this problem I found that perhaps I needed to map the response but it made no difference. Below is the code I used

 this.exists.map(response => this.response$)
            .filter(data => data !== undefined)
            .subscribe(x => {

I tried comparing to both "undefined" and "null". I have run out of ideas, please help.

Upvotes: 1

Views: 1270

Answers (2)

gsamaras
gsamaras

Reputation: 73366

How about using flatMap(), like this?

import 'rxjs/add/operator/mergeMap`;

this.exists.flatMap(response => {
  this.response$
  .catch(error => {
    console.error(error);
    return Rx.Observable.empty();
  });
});

I imported mergeMap operator, despite the fact that we will use flatMap, because of flatMap missing after upgrading to RC 6 and RxJS Beta 11 and rxjs flatmap missing.

Read about map vs flatMap, if you like.

Upvotes: 2

Milad
Milad

Reputation: 28592

 this.exists.flatMap(response => this.response$)

Upvotes: 1

Related Questions