title: Filter api data in Angular 6 service
body: <p>All the examples still refer to Angular 2 methods and NG6 uses pipe for data calls within a service.</p>
  
  <p>This basic method in my service gets all of the data returned by the API:</p>
  
  <pre><code>  getPatchGroups(): Observable&lt;PatchGroup[]&gt; {
      return this.http
        .get(API_URL + 'PatchGroups/ForApp/' + appId)
        .pipe(
          map(this.extractData),
          catchError(this.handleError)
        );
    }
  </code></pre>
  
  <p>Now, I need to split this up so that I have a call that returns anything with an id of -1 and a call that gets everything else.  I need to display the two groups of data in different areas of the page.</p>
  
  <pre><code>  getUngroupedPatchGroups(): Observable&lt;PatchGroup[]&gt; {
      return this.http
        .get(API_URL + 'PatchGroups/ForApp/' + appId)
        .pipe(
          map(this.extractData),  // where id &lt; 0
          catchError(this.handleError)
        );
    }
  
    getGroupedPatchGroups(): Observable&lt;PatchGroup[]&gt; {
      return this.http
        .get(API_URL + 'PatchGroups/ForApp/' + appId)
        .pipe(
          map(this.extractData),  // where id &gt; 0
          catchError(this.handleError)
        );
    }
  </code></pre>
  
  <p>It feels dirty to filter in the component but that would be one way... create a custom pipe and apply to the ngFor.  Would performance, etc. be better to create two functions and apply a filter to each?  What is the correct format for NG 6.1.1?</p>
  
  <p>EDIT
  If I add the filter to the extraData I get the results I expect.  However, Response is deprecated and body is shadow named?  How do I fix this?</p>
  
  <pre><code>  private extractData(resp: Response) {
      const body = resp.json();
      return body.filter(body =&gt; body.id &gt; 0);
    }
  </code></pre>