title: Manipulate data before returning observable
body: <p>I am pretty new with Angular 2 and the concept of Observables. However what i am trying to achieve should be fairly simple for experienced gurus :)</p>
  
  <p>So:
  I have a component in which i have <code>subscribed</code> the observable which is coming from a service. For testing purposes, i have been using data Arrays to make my components live. Now that when its done, i want to hook real API calls to my service. Now the problem is that the data that i get from the server needs to be manipulated before its returned to the component. When i manipulate it, i get error such as "cannot read property 'subscribe' of null"</p>
  
  <p>Now basically this error is coming because in my service observable, i send an API request using HTTP.get method and the code doesn't wait for its response to finish. I do get the result from server but that comes after the error in console.</p>
  
  <p>Can anyone please guide me how to request an HTTP call and then manipulate its data before sending it to the component that has the services subscribed?</p>
  
  <p>Here is my component code:</p>
  
  <pre><code>getSearchResults(keyword, parentId?, subCatId?) {
      this.subscriptionResults = this.catalogService.getSearchResults(keyword, parentId, subCatId)
          .subscribe(
              data =&gt; {
                  this.results                = data.results.parts;
                  this.numResults             = data.results.totalItemCount;
                  this.timeResults            = data.results.processingTimeMS;
                  this.categories             = data.categories;
                  this.subCategories          = data.subCategories;
                  this.brands                 = data.brands;
                  this.suppliers              = data.suppliers;
                  this.layoutType             = data.layoutType;
                  this.allCategories          = data.allCategories;
                  this.selCategoryName        = data.selCategoryName;
                  this.selSubCategoryName     = data.selSubCategoryName;
  
                  if ( this.debugMode ) {
                      console.log('RESULTS: ', data);
                  }
              },
              error =&gt; this.errorMessage = &lt;any&gt;error
          );
  }
  </code></pre>
  
  <p>And here is my service:</p>
  
  <pre><code>// Get data from server
  getDataFromServer(URL: string): Observable&lt;any&gt; {
      return this.http.get(URL).flatMap(this.extractData).catch(this.handleError);
  }
  
  
  getSearchResults(keyword: string, parentCatId?:number, subCatId?:number): Observable&lt;any&gt; {
  
      let request = null;
      let result  = null;
  
      let URL = this.API_URL + '/search?categoryId=' + subCatId + '&amp;format=json';
      request = this.getDataFromServer(URL);
  
      request.subscribe(
          () =&gt; { 
              // Modify result here and send it back 
          },
          error =&gt; { console.log('ERROR: ', &lt;any&gt;error); }
      );
  </code></pre>
  
  <p>I want to manipulate the response data before i want to return it. How can i do that?</p>
  
  <p><strong>-- EDIT --</strong>
  If i return a BehaviorSubject:</p>
  
  <pre><code>return new BehaviorSubject&lt;any&gt;(request.subscribe(
              res =&gt; { return this.processResultData(res, layoutType, keyword, parentCatId, subCatId); },
              err =&gt; { console.log('RETURN ERROR: ', &lt;any&gt;err); }
          ));
  </code></pre>
  
  <p>I get subscription object in my component (which is what i dont need). Instead i need the data thats inside of the subscription.</p>