Angular Wait an Observable to finish before starting other Observable

Question

I have two Observables :

constructor(
    private afAuth:AngularFireAuth,
    private db:AngularFireDatabase
    ) {
      
    this.afAuth.authState.subscribe(x=> 
      {
        this.userId=x?.uid;
        console.log(this.userId);
      });
      
      console.log(this.userId);
      this.db.list('users/'+this.userId+'/movies-favourited').valueChanges().subscribe(data=>{
        this.favouriteList=data;
      });
   }

How do I make sure that I get the userId in the first Observable before getting the list in second Observable.?

Answer 1

The correct way to do it is by using switchMap as shown below:

this.afAuth.authState.pipe(
    switchMap(user => {
        if(user) {
            this.userId = user.uid;
            this.db.list('users/'+this.userId+'/movies-favourited')
                .valueChanges().subscribe(data => {
                    this.favouriteList = data;
                });
        }
    })
);

You can read more about switchMap here .

Answer 2

You can either replace the first observable with promise

OR

You can put the second observable inside the first one like this:

this.afAuth.authState.subscribe(x=> 
  {
    this.userId=x?.uid;
    console.log(this.userId);
  this.db.list('users/'+this.userId+'/movies-favourited').valueChanges().subscribe(data=>{
    this.favouriteList=data;
    });
  });

Answer 3

Once the first observable successfully retrieve data by subscribing it will subscribe to the second observable which will solve your problem.

constructor(
    private afAuth: AngularFireAuth,
    private db: AngularFireDatabase
) {
    this.afAuth.authState.subscribe(x => {
        this.userId = x?.uid;
        console.log(this.userId);
        this.db.list('users/' + this.userId + '/movies-favourited').valueChanges().subscribe(data => {
            this.favouriteList = data;
        });
        console.log(this.userId);
    });
}

Answer 4

This must be the solution for you task.

this.afAuth.authState
                .subscribe(
                    (x: any) => {
                        this.userId = x?.uid;
                        if (x.uid) {
                            this.db.list('users/' + this.userId + '/movies-favourited').valueChanges()
                                .subscribe(
                                    (data: any) => {
                                        this.favouriteList = data;
                                    },
                                    (error) => {
                                        console.log(error);
                                    });
                        }
    
                    },
                    (error) => {
                        console.log(error);
                    }
                );

More suggestions to optimize your code:

1. Consider put your code inside ngOnInit() lifecycle instead of constuctor.
2. Define data types of your variables 'x' and 'data'.
3. Don't forget to unsubscribe.
4. Handle your errors in some way.