Using chained observables in transform pipe

user_1392367 0
Viewed 49

I am facing issue while chaining observables in transform pipe. I have bank info with account number which is encrypted. I want to decrypt that account number and show.

In console it shows the decrypted account number but it displays only encrypted one. pls help

    public transform(bankId: any, name: string, args?: any): Observable<string> {
    return this.supService.getBankById(bankId).pipe(
      switchMap(
        (bInfo: {
        data: {
          bankInfo: {
            accno;
          };
        };
      }) => {
        if (bInfo.data.bankInfo.accno) {
          const encodedAccountNumber = bInfo.data.partyBankInfo.accountNumber;
          this.supService.unProtectBank(encodedAccountNumber).subscribe(
            (data: any) => {
              console.log("Unencrypted data======>", data);
              bInfo.data.bankInfo.accno = data;
          });
        }
        return of(bInfo);
      }),
      map(
        (info: {
          data: {
            bankInfo: {
              accno;
            };
          };
        }) => {
          console.log("Bank Info==============>", bankInfo);
            if (name === 'accountNumber') {
            return info.data.bankInfo.accno;
          }
        }
      )
    );
  }
observable angular typescript pipe
2 Answers

Your first switchMap operation returns of(bInfo) immediately without any chance for you inner call to finish and update the value.

What you need to do is replace the content of your switchMap with:

if (bInfo.data.bankInfo.accno) {
  const encodedAccountNumber = bInfo.data.partyBankInfo.accountNumber;
  // Do not subscribe here
  return this.supService.unProtectBank(encodedAccountNumber).pipe(
    map((data: any) => {
      console.log("Unencrypted data======>", data);
      bInfo.data.partyBankInfo.accountNumber = data;
      // Return something out of the Observable
      return bInfo;
    })
  );
} else {
  return of(bInfo);
}

The key thing here are the return statements and the removal of subscribe in favour of pipe.

user_53891270

return the upProtectedBank Observable and use tap operator instead of subscribe.

switchMap(
        (bInfo: {
        data: {
          bankInfo: {
            accno;
          };
        };
      }) => {
        if (bInfo.data.bankInfo.accno) {
          const encodedAccountNumber = bInfo.data.partyBankInfo.accountNumber;
          return this.supService.unProtectBank(encodedAccountNumber).pipe(
            map((data: any) => {
              console.log("Unencrypted data======>", data);
              bInfo.data.bankInfo.accno = data;
              return bInfo;
          }));
        }
        return of(bInfo);
      }),
user_98448730
Related