title: Trying to join one-to-many firebase documents in angular using angularfire
body: <p>I know this has been asked before but I can't figure out my scenario from the typical answers provided. In my app I have firebase collection called objectives and a tasks collection that have a one to many relationship. Each objective has a tasks array (filled with the ID's of the tasks) and each task has an objectiveId. I would like to join these so when I make a snapshotChanges() call to get all objectives I would like to return an array of objectives with tasks objects nested in.</p>
  
  <p>I have this code and I know it does not work cuz I can't return something in an observable but I was wondering how would I use RxJS operators in this case?</p>
  
  <pre><code>loadObjectives() {
   return this.objectivesCollection.snapshotChanges().pipe(
    map(actions =&gt; {
      return actions.map(_ =&gt; {
        const id = _.payload.doc.id;
        const data = _.payload.doc.data();
        const tasks = this.afs
          .collection&lt;Task&gt;("tasks", ref =&gt;
            ref.where("objectiveId", "==", id)
          )
          .valueChanges().subscribe( tasks =&gt; {
            return new Objective(id, data.title, tasks);
          });
      });
    }),
    tap(objectives =&gt; {
      this._objectives.next(objectives);
    })
  );}
  </code></pre>