title: 'Joining' Firebase Queries in Angularfire2
body: <h1>Update:</h1>
  
  <p>The issues I was encountering with the empty value fields had to do with non-existent keys in my database, so most of the discourse here won't apply to your question. If you're looking for a way to 'join' queries in AngularFire2, the accepted answer below does a fine job of this. I'm currently using <code>combineLatest</code> instead of <code>forkJoin</code>. In order to do this you have to <code>import 'rxjs/add/observable/combineLatest';</code>.</p>
  
  <p>I have the following denormalized Firebase structure:</p>
  
  <pre><code>members
    -memberid1
      -threads
         -threadid1: true,
         -threadid3: true
      -username: "Adam"
      ...
  
  threads
    -threadid1
        -author: memberid3
        -quality: 67
        -participants
           -memberid2: true,
           -memberid3: true
       ...
  </code></pre>
  
  <p>I want to render <code>username</code> in my <code>threads</code> view, which is sorted by <code>quality</code>. </p>
  
  <p>My service:</p>
  
  <pre><code>getUsername(memberKey: string) {
      return this.af.database.object('/members/' + memberKey + '/username')
  }
  
  getFeaturedThreads(): FirebaseListObservable&lt;any[]&gt; {
      return this.af.database.list('/threads', {
          query: {
              orderByChild: 'quality',
              endAt: 10
          }
      });
  }
  </code></pre>
  
  <p>My component:</p>
  
  <pre><code>ngOnInit() {
      this.threads = this.featuredThreadsService.getFeaturedThreads()
      this.threads.subscribe( 
          allThreads =&gt; 
          allThreads.forEach(thisThread =&gt; {
              thisThread.username = this.featuredThreadsService.getUsername(thisThread.author)
              console.log(thisThread.username)
          })
      )
  } 
  </code></pre>
  
  <p>For some reason this logs what looks like unfulfilled observables to the console.</p>
  
  <p><a href="https://i.stack.imgur.com/W8XlO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W8XlO.png" alt="enter image description here"></a></p>
  
  <p>I'd like to get these values into a property of <code>threads</code> so I can render it in my view like this:</p>
  
  <pre><code>&lt;div *ngFor="let thread of threads | async" class="thread-tile"&gt;
      ...
      {{threads.username}}
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Updated: <code>console.log</code> for <code>allThreads</code> and <code>thisThread</code></p>
  
  <p><a href="https://i.stack.imgur.com/tpXeU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tpXeU.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/iO408.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iO408.png" alt="enter image description here"></a></p>
  
  <p>Updated: subscribed to getUsername()</p>
  
  <pre><code>this.featuredThreadsService.getUsername(thisThread.author)
          .subscribe( username =&gt; console.log(username))
  </code></pre>
  
  <p>The result of this is objects with no values: </p>
  
  <p><a href="https://i.stack.imgur.com/Gi2dF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gi2dF.png" alt="enter image description here"></a></p>