title: Angular 4, convert http response observable to object observable
body: <p>I'm new to the concepts of observables and need some help with a conversion.<br>
  I have a service which returns an <code>Observable&lt;Response&gt;</code> from a Http request, but I need to convert it do an <code>Observable&lt;PriceTag&gt;</code> to use it on a <code>DataSource</code> inside the connect method.<br>
  Is there anyway to do this?</p>
  
  <p>This is the method from my service:</p>
  
  <pre><code>getPriceTags(): Observable&lt;Response&gt; {
  
      // Set the request headers
      const headers = new Headers({ 'Content-Type': 'application/json' });
  
      // Returns the request observable
      return this.http.post(Constants.WEBSERVICE_ADDRESS + "/priceTag", null, {headers: headers});
  
  }
  </code></pre>
  
  <p>And here is the DataSource class where I need to return it as an <code>Observable&lt;PriceTag&gt;</code>:</p>
  
  <pre><code>export class PriceTagDataSource extends DataSource&lt;PriceTag&gt; {
  
      constructor (private priceTagService: PriceTagService) {
          super();
      }
  
      connect(): Observable&lt;PriceTag&gt; {
  
          // Here I retrieve the Observable&lt;Response&gt; from my service
          const respObs = this.priceTagService.getPriceTags();
  
          // Now I need to return a Observable&lt;PriceTag&gt; 
  
      }
  
      disconnect() {}
  
  }
  </code></pre>
  
  <p>Here's an example from the response from my request:</p>
  
  <pre><code>{
      // This object is used to check if the query on the server was sucessful
      "query": {
          "sucessful": true
      },
  
      // These are my PriceTags 
      "tags": [
          {
              "id": "1",
              "name": "MAIN"
          },
          {
              "id": "2",
              "name": "CARD"
          }
      ]
  }
  </code></pre>