title: How to create an observable within an observable in Angular2
body: <p>I might be off on the process, but here goes:</p>
  
  <p>I have an angular2 service.  The source for the data of this service is going to be localstorage... later optionally updated when a DB call using http returns.  Because I'll be wanting to update the data returned as the various sources come back, it appears I want to use an observables.  For now, I'm just trying to get the concept down, so I've skipped the localstorage aspect... but I'm including the 'backstory' so it makes (some) sense as to why I'm wanting to do this in multiple methods.</p>
  
  <p>My thought was I would have a "getHTTPEvents()" method that would return an observable with the payload being the events from the DB. (the theory being that at some point in the future I'd also have a 'getLSEvents()' method that would piggy back in there)</p>
  
  <p>To mock that up, I have this code:</p>
  
  <pre><code>private eventsUrl = 'app/mock-events.json';
  getHTTPEvents() : Observable&lt;Array&lt;any&gt;&gt; { 
      return this._http.get(this.eventsUrl)
          .map(response =&gt; response.json()['events'])
          .catch(this.handleError); // handle error is a logging method
  }
  </code></pre>
  
  <p>My goal would be to create a method that allows filtering on the returned events yet still returns an observable to users of the service.  That is where my problem is.  With that goal, I have a public method which will be called by users of the service. (attempted to use pattern from here <a href="https://coryrylan.com/blog/angular-2-observable-data-services" rel="nofollow noreferrer">https://coryrylan.com/blog/angular-2-observable-data-services</a>)</p>
  
  <pre><code>public getEvents(key:string,value:string) : Observable&lt;Array&lt;any&gt;&gt; {
      var allEventsObserve : Observable&lt;Array&lt;any&gt;&gt; = this.getHTTPEvents();
      var filteredEventsObserve : Observable&lt;Array&lt;any&gt;&gt;;
  
  
      allEventsObserve 
      .subscribe(
          events =&gt; {
              for(var i=0;i&lt;events.length;i++) {
                  if(events[i][key]==value) {
                      console.log('MATCH!!!' + events[i][key]); // THIS WORKS!
                      return new Observable(observer =&gt; filteredEventsObserve = observer);  // what do I need to return here?  I want to return an observable so the service consumer can get updates
                  }
              }
              return allEventsObserve
          },
          error =&gt;  console.error("Error retrieving all events for filtering: " + error));
  </code></pre>
  
  <p>}</p>
  
  <p>The above doesn't work.  I've watch lots of videos and read lots of tutorials about observables, but nothing I can find seems to go more indepth other than creating and using the http observable.</p>
  
  <p>I further tried this method of making the new observable:</p>
  
  <pre><code>var newObs = Observable.create(function (observer) {
                      observer.next(events[i]);
                      observer.complete(events[i]);
                  });
  </code></pre>
  
  <p>And while at least that compiles, I'm not sure how to 'return' it at the right time... as I can't "Create" it outside the allEventsObserve.subscribe method (because 'events' doesn't exist) and can't (seem) to "return" it from within the subscribe. I'm also not entirely sure how I'd then "trigger" the 'next'...?</p>
  
  <p>Do I need to modify the data within allEventsObserve and somehow simply still return that?  Do I make a new observable (as attempted above) with the right payload - and if so, how do I trigger it? etc...  I've checked here: <a href="https://stackoverflow.com/questions/35256449/how-to-declare-an-observable-on-angular2">How to declare an observable on angular2</a> but can't seem to follow how the 'second' observable gets triggered.   Perhaps I have the entire paradigm wrong?</p>