How to wait for a subscription to complete angular

Question

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.

gsamaras · Answer 1 · 2017-09-01T12:42:13.597

2

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.

edited Sep 01 '17 at 12:42

answered Sep 01 '17 at 12:31

gsamaras

71,951
46
188
305

1

That's better :) – Swoox Sep 01 '17 at 12:37
This is riduculous, why would you duplicate my answer ? you could've just added a comment ) Such an upvote needy : – Milad Sep 01 '17 at 12:55
1

@Milad I am sorry if that's the impression you got. Fact is that I hadn't seen your answer, because we posted at the same time. – gsamaras Sep 01 '17 at 16:20

score 1 · Answer 2 · answered Sep 01 '17 at 12:30

1

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

answered Sep 01 '17 at 12:30

Milad

27,506
11
76
85

Thank you. I received an error "TypeError: _this.exists.flatMap is not a function" I added 'import 'rxjs/add/operator/flatMap' but had Can't resole 'rxjs/add/operator/flatMap' – Jie Hart Sep 01 '17 at 12:39
I made the change the error went away thank you unfortunately the " .filter(data => data !== undefined)" does not do what I expected. I does hold up the stream of data but the subscribe seems to go on it's merry way and crashes "util.js:233 FIREBASE WARNING: Exception was thrown by user callback. TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable." back to the drawing board. Thank you for your Help. – Jie Hart Sep 01 '17 at 13:01
Are you sure `this. exists` and `this.response$` are Observables ? Show us the code – Milad Sep 01 '17 at 13:02
It is too long by 1500 chars. apart from the code above there is: – Jie Hart Sep 01 '17 at 13:14
still too long. I did not know that this.response$ needed to be set up as an observable. How do I do it? this.exists is as I have used it before in this project and it works. – Jie Hart Sep 01 '17 at 13:18

How to wait for a subscription to complete angular

2 Answers2