title: angular2 service - RXjs
body: <p>how i prevent an error while trynig to get item by id - if i refresh the page- this is the code:</p>
  
  <p>the service code:</p>
  
  <pre><code> getServices(): Observable &lt;any&gt; {
          return this._http.get(this.APIURL + 'serives.json')
              .map((resposne: Response) =&gt; &lt;any&gt; resposne.json())
              .do(data =&gt; {
                  this.services = data
              })
              .catch(this.hendelError)
      }
  
  getService(id): any {
      let myService;
      if (this.services.length) {
          myService = this.services.filter(service =&gt; service.id === id);
          return myService;
      } else {
          this.getServices().subscribe(
              data =&gt; {
                  myService = this.services.filter(service =&gt; service.id === id);
                  return myService;
              }
          )
      }
  
  }
  
  private hendelError(error: Response) {
      console.log('error', error);
      return Observable.throw(error.json().error || 'server error');
  }
  </code></pre>
  
  <p>and the component code is:</p>
  
  <pre><code> ngOnInit() {
      if(this._manager.services.length){
        this.services = this._manager.services;
        return;
      }else{
        this._manager.getServices()
            .subscribe(
                data =&gt; {this.services = data;
                  console.log('data',data);}
            )
      }
    }
  </code></pre>
  
  <p>and when i refresh the page i get this error:</p>
  
  <p><code>main.bundle.js:46117 EXCEPTION: Uncaught (in promise): Error: Error in ./ServicedetailsComponent class ServicedetailsComponent_Host - inline template:0:0 caused by: Cannot read property '0' of undefi</code>ned</p>