How to get do a join in angularfire2 database

Solution 1:

You can use forkJoin to obtain the users for the projects and can use its result selector to copy the required properties into the emitted project objects:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/switchMap';

// Compose an observable based on the projectList:

this.projectWithUserList = this.projectList

  // Each time the projectList emits, switch to unsubscribe/ignore
  // any pending user queries:

  .switchMap(projects => {

    // Map the projects to the array of observables that are to be
    // joined.

    let userObservables = projects.map(project => this.af.database
      .object(`users/${project.uId}`)
      .first()
    );

    // Join the user observables, and match up the users with the
    // projects, etc.

    return userObservables.length === 0 ?
      Observable.of(projects) :
      Observable.forkJoin(...userObservables, (...users) => {
        projects.forEach((project, index) => {
          project.userName = users[index].userName;
          project.avatar = users[index].avatar;
        });
        return projects;          
      })
  });

The above implementation will emit an array of projects whenever the projects in the database change, but it will not emit an array if the user information changes.

If you want to emit an array if either the projects or the user information changes, you can use combineLatest instead of forkJoin for the users:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/combineLatest';
import 'rxjs/add/operator/switchMap';

// Compose an observable based on the projectList:

this.projectWithUserList = this.projectList

  // Each time the projectList emits, switch to unsubscribe/ignore
  // any pending user queries:

  .switchMap(projects => {

    // Map the projects to the array of observables that are to be
    // combined.

    let userObservables = projects.map(project => this.af.database
      .object(`users/${project.uId}`)
    );

    // Combine the user observables, and match up the users with the
    // projects, etc.

    return userObservables.length === 0 ?
      Observable.of(projects) :
      Observable.combineLatest(...userObservables, (...users) => {
        projects.forEach((project, index) => {
          project.userName = users[index].userName;
          project.avatar = users[index].avatar;
        });
        return projects;          
      });
  });