Trying to merge two observable streams with keys using CombineLatest in Angular

Question

I have two observables which I am getting from firebase. The two observables have two common variables: one is bankAccountId, and the other one is linkTobankAccountId. I need to merge these observables into an object with the following structure:

{
   {
       bankAccounts:
           {
               bankAccountId1
               ...bankFields
                   }, 
           {    
               bankAccountId2
               ...bankFields 
               }
},
   {    debitCards:
           {
               linkToBankAccountId1
               ...debitCardfields
               }
   }
}

I don't have lot of experience merging observables. I've tried many things, but I've not been successful so far. I'm having trouble with the syntax - specifically doing an 'inner join' on the the variables I'm using as keys. This is my code:

this.vm$ = combineLatest([
      this.caregiverBankAccounts$
    .pipe(switchMap(banks =>
          banks.bankAccountId)),
  this.caregiverDebitCards$.pipe(
    map(([debit, linkTobankAccountId]) => {
    linkTobankAccountId === bankAccountId;
}))
]);

I realize the syntax is wrong. I'm getting an error that it can't find bankAccountId. I don't know how to make it work.

Answer 1

In the below function I'm mapping the observables, then joining them on the index.

this.vm$ = combineLatest([
      this.caregiverBankAccounts$,
      this.caregiverDebitCards$,

    ])
      .pipe(map(([bank, debit]) => {
        const combinedStream = bank.map((item, i) => Object.assign({}, item, debit[i]));
        console.log(combinedStream);
        return [...combinedStream];


        }

       ));