Joining Flattened Data

Question

i'd like to join the data on init from my customers table into the projects list.

Model is like this:

• projects

  • key
  • name: string
  • customer : customerKey

• customers

  • key
  • name: string

Do you have an example, how i do this from angular2 component using angularfire2?

my controller looks like this:

import { Component, OnInit } from '@angular/core';
import { Project } from '../project';
import { Router } from '@angular/router';
import { FirebaseAuth } from 'angularfire2';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
import { Observable } from 'rxjs';

@Component({
  moduleId: module.id,
  selector: 'app-projects',
  templateUrl: 'projects.component.html',
  styleUrls: ['projects.component.css']
})
export class ProjectsComponent implements OnInit {

  projects: FirebaseListObservable<any[]>;
  customers: FirebaseListObservable<any[]>;
  projectName: string;
  constructor(
    private router: Router,
    private af: AngularFire
  ) { };

  ngOnInit() {
    this.projects = this.af.database.list('projects');
  }

  add(projectName: string) {
    this.af.database.list('projects')
      .push({ name: projectName, id: '123' });
    this.projectName = null;
  }
}

Update

i've changed the type of this.projects to Observable from FirebaseListObservable my on ngOnInit() method looks now like this:

ngOnInit() {
this.projects = this.af.database.list(`projects`)
  .map(projects => {
    projects.map(project => {
      this.af.database.object('customer/' + project.customer + '/name')
        .subscribe(customer => {
          project.customer = customer;
        })
      return project;
    })
    return projects;
  });
}

i can now access not the name property of customer from the template inside of

<li *ngFor="let project of projects | async">

project.customer.$value

Answer 1

Not exactly sure how your dataset looks like, so I'm just going to write a basic example. Assuming a structure something like this:

- projects
  - key
    - name: string
    - customers
      - customerKey: boolean

- customers
  - key
    - name: string

Example data

- projects
  - projectId1
    - name: "Cool project!",
    - customers
      - customerId1: true,
      - customerId2: true
  - projectId2
    - name: "Another cool project!",
    - customers
      - customerId2: true,
      - customerId3: true

- customers
  - customerId1
    - name: "John Smith"
  - customerId2
    - name: "John Doe"
  - customerId3
    - name: "John John"

So we're storing the customers' key in every projects' customers property.

Let's say we want to list every projects, but we also want to get the customers' real name as well, not just their id. Since firebase doesn't have joins we'll have to do this manually. Here's one way to do it:

this.projects = this.af.database.list(`projects`)
  .map(projects => {
    return projects.map(project => {
      project.customers.map(customer => {
        this.af.database.list(`customers`)
          .subscribe(c => {
            customer = c;
          });
      });
      return project;
    });
  });

The inner .subscribe could be changed to a simple .map if you want to get the data asynchronously (in this case use the async pipe in the template`).