angular - How to get do a join in angularfire2 database

Question

I have searched through and I still couldn't get the right answer. I will be happy you point me to the right direction.

I have a database with users and projects

pojects: 
   08177a0acb3f4d96f8cb5fa19002d2ed:
       pid: 08177a0acb3f4d96f8cb5fa19002d2ed,
       pName: "Prject 1"
       uId:  "254",
       createdAt: 9377476



users: 
   254:
       userName: "Eric"
       uId:  "254"
       avatar: "image.jpg"

Now I want to display my projects, I do a list retrieve in my service

this.projectList = this.af.database.list('projects',  {
      query: {
        orderByChild: 'createdAt'
      }
    });



getProjects() {
     return this.projectList.map(snapshot => {
         return snapshot;
     });

and I subscribe in the component.ts

this.projectService.getProjects()
    .subscribe(projects => this.projects = projects);

What I want to do is get the userName from the users and display it with projects.

How can I use the uId field in projects to retrieve the user info in the users list into one list so I can display i.e {{project.userName}} {{project.avatar}}?

Answer 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;          
      });
  });