title: Get string value from Observable<string> in typescript and Angular
body: <p>I want to get string value from Observable and return the value from the function to the caller function.</p>
  
  <p>For eg: 
  I have array of keys and would like to fetch the value (string) of all key one by one and display it html component which has menu bar.</p>
  
  <p>Here are the ts files:</p>
  
  <h2>key-list.component.ts</h2>
  
  <pre><code>public data = [ { 'key': 1, 'value' : this.getValue(1)}, 
                  { 'key': 2, 'value' : this.getValue(2)}, 
                  ...
                ];
  
  private getValue(key: number): string {
      return this.keyService.find(key).subscribe(response =&gt; {
           return response;
      });
  }
  </code></pre>
  
  <h2>keyService.ts</h2>
  
  <pre><code>...
  public find(key:number): Observable&lt;any&gt; {
    return this.http.get(`/api/keys/${key}`).map(res =&gt; res.json() || {});
  }
  ...
  </code></pre>
  
  <p>I want to display all the values in the html component.
  But getting error in key-list.component.ts that observable into type string.</p>
  
  <p>How I can solve this subscription methodolgy and make sure that getValue should always return string, and make it flawless. </p>
  
  <p>One of the solution is:</p>
  
  <pre><code>private getValue(key: number): string {
          let result: string;
          this.keyService.find(key).subscribe(res =&gt; result = res);
          return result;
      }
  </code></pre>
  
  <p>The above solution doesn't work always.
  What are the alternatives solution for this kind of problem?</p>