How do I return the value of a promise inside another promise?

Question

I am trying to return the value of a function of a promise inside a promise. Still pretty new to promises so any advise is much appreciated!

// card.service.ts

getCard(cardId: string): DocumentData {
    return firebase.firestore().collection('users').doc(this.currentUserId)
        .collection('cardsList').doc(cardId)
        .get()
        .then((docSnapShot) => {
            console.log((docSnapShot));
            return docSnapShot.data();
        },
        (err) => {
            console.log(err);
        });
  }

addCardToWallet(userId: string, cardId: string, dataObject: DocumentData) {
      return firebase.firestore().collection('users').doc(userId)
          .collection('walletList')
          .doc(cardId)
          .set(
              dataObject
          );
  }

// scanner.component.ts
scanCode() {
   this.barcodeScanner.scan(
          {
           showFlipCameraButton : true, // iOS and Android
           showTorchButton : true, // iOS and Android
           prompt : 'Scan a Kardbox QR' // Android
          }
     ).then((barcodeData) => {
         this.cardService.getCard(barcodeData.text)
             .then((data) => {
               // I want to add this to the database first

               this.cardService.addCardToWallet(this.currentUserId, barcodeData.text, data);

              // After adding values to database, navigate to other page

              this.router.navigate(['/home/wallet']);
        });
     });
 }

The output that I'm getting is the value of barcodeData and I have no idea why it's doing that.

Answer 1

I think You should try async await, replace:

this.barcodeScanner.scan(
        {
          showFlipCameraButton : true, // iOS and Android
          showTorchButton : true, // iOS and Android
          prompt : 'Scan a Kardbox QR' // Android
        }
    ).then((barcodeData) => {
        this.cardService.getCard(barcodeData.text)
            .then((data) => {
              // I want to add this to the database first
          this.cardService.addCardToWallet(this.currentUserId, barcodeData.text, data);

          // After adding values to database, navigate to other page

          this.router.navigate(['/home/wallet']);
    });
});

with:

const barcodeData = await this.barcodeScanner.scan(
  {
    showFlipCameraButton : true, // iOS and Android
    showTorchButton : true, // iOS and Android
    prompt : 'Scan a Kardbox QR' // Android
  },
);
const data = await this.cardService.getCard(barcodeData.text);

this.cardService.addCardToWallet(this.currentUserId, barcodeData.text, data);
this.router.navigate(['/home/wallet']);

And don't forget to add async before scancode() method.

Answer 2

You should return a promise in your getCard(cardId: string) function

getCard(cardId: string): Promise<DataType or any> {
    const promise = new Promise((resolve,reject) => { 
         firebase.firestore().collection('users').doc(this.currentUserId)
        .collection('cardsList').doc(cardId)
        .get()
        .then((docSnapShot) => {
            console.log((docSnapShot));
            resolve(docSnapShot.data());
        },
        (err) => {
            console.log(err);
        });
    });
    return promise;
  }

If you want to navigate after the data is added into the database you should put the router.navigate into the callback of addCardToWallet Method

this.cardService.addCardToWallet(this.currentUserId, barcodeData.text,data).then(res => {
      router.navigate(/somwhere)
});

Answer 3

Maybe this could help. Please tell me if it doesn't.

scanCode( ) {
    this.barcodeScanner.scan({
        showFlipCameraButton: true,
        showTorchButton: true,
        prompt: 'Scan a Kardbox QR'
    })
    .then( ( barcodeData ) => {
        this.cardService.getCard( barcodeData.text )
            .then( ( data ) => {
               // addCardToWallet returns a promise, right? Wait for it to return
               this.cardService.addCardToWallet( this.currentUserId, barcodeData.text, data )
                   .then( ( ) => {
                       // And after the card is added, tell the router to navigate
                       this.router.navigate([ '/home/wallet' ]);
                   })
            });
     })
     // Just in case, I recommend you to catch any error that might arise in the promise chain
     .catch( ( error ) => {
         console.error( 'Oops, something failed: "' + error + '"' );
     });
 }