title: How to load JSON from a pipe?
body: <p>I have a service that's loading a JSON file and using that service in a custom pipe:</p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  import { Observable } from 'rxjs/Rx';
  import { LanguageLoadService } from '../../services/language-load/language-load.service';
  
  @Pipe({name: 'langAsset'})
  export class LangAsset implements PipeTransform {
  
    constructor(private languageService: LanguageLoadService) {
  
    }
  
    transform(textKey: string): Observable&lt;any&gt; {
      return new Observable(observer =&gt; {
        this.languageService.loadLanguage("en-US").subscribe((langData) =&gt; {
          observer.next(langData[textKey] ? langData[textKey] : 'Error');
        })
      });
    }
  }
  </code></pre>
  
  <p>And on the template:</p>
  
  <pre><code>&lt;p&gt;{{'test' | langAsset | async }}&lt;/p&gt;
  </code></pre>
  
  <p>But it seems that transform runs before the service finishes loading the JSON, as the result is <code>[object Object]</code> on the page, and console.log prints it out fine when it logs from inside the <code>loadLanguage</code> subscribe. How can I get this to rerun, by returning an observable instead of a string in the transform function? I know I have to use <code>AsyncPipe</code>, but I'm unsure how to go about this.</p>