angularfire2 rxjs join observables from two tables with dynamic updates

Question

So I have two tables. One of which is my user which stores blocks The other stores the data for these blocks.

I am trying to combine these correctly so in my component I get a list of blocks with their data according to dataID

- user
    - blocks
        - block1
            - blockSize
            - blockOptions
                - dataID
        - ...

- data
  - dataId1
      - stuff ...
  - ...

With the following code I get my blocks and data but the data node is still a FirebaseObervable. So I have to use the async in my dumb components. What I am asking is how do I combine these correctly so I only have to use the async pipe and push the data to subcomponents. While not losing dynamic changes.

return this.db.list(`/user/${this.userId}/blocks`).switchMap((blocks:Block[]) => {
  let blockData$ = blocks.map(block => {        
      return this.db.object(`/data/${block.blockOptions.dataID}`)
  });
  return Observable.combineLatest(blockData$,blocks, (bData,block) => {
    block.data = bData;
    return blocks;
  });
})

Template example

//what I want to happen
*ngFor="let block of blocks | async">
<dumb-component [blockData] = "block.data"></dumb-component>

//what I have to do now
*ngFor="let block of blocks | async">
<dumb-component [blockData] = "block.data | async"></dumb-component>

Thanks in advance I feel really close any nudge in the right direction would be appreciated

Answer 1

You are close. It's only the Observable.combineLatest call that needs some changes:

return this.db.list(`/user/${this.userId}/blocks`)
  .switchMap((blocks: Block[]) => {
    let arrayOf$ = blocks.map(block => {
      return this.db.object(`/data/${block.blockOptions.dataID}`)
    });
    return Observable.combineLatest(arrayOf$, (...arrayOfData) => {
      blocks.forEach((block, index) => {
        block.data = arrayOfData[index];
      });
      return blocks;
    });
  });

Your call to blocks.map returns an array of observables, so the combineLatest signature you want to use is this one:

export function combineLatest<T, R>(
  array: ObservableInput<T>[],
  project: (...values: Array<T>) => R,
  scheduler?: IScheduler
): Observable<R>;

You pass it an array of observables and it calls your project function with the results. Just collect them into an array, iterate your blocks, and assign the result at the appropriate index.

---

If you are using ngrx or OnPush change detection, you should make sure that mutations are not made to the blocks array or the blocks themselves. To avoid mutations, the combineLatest call would be something like this:

return Observable.combineLatest(arrayOf$, (...arrayOfData) => {
  return blocks.map((block, index) => {
    const data = arrayOfData[index];
    if (block.data !== data) {
        // If the block has no data or if the data has changed,
        // copy the block to avoid mutating it.
        return Object.assign({}, block, { data });
    }
    return block;
  }
});