title: Observable with object Angular2
body: <p>At the beginning I want to apologize for my poor English. We build the of my work rest service. On the client side it supports angular2. I am a beginner in this technology. I read that it is better to use Observable, instead of promise. I want to get a single object with user data, and unfortunately console returns an error "Can not read property ... of undefined". The documentation Angular example uses an array rather than a single object. When I use the array, there is no error, but I need to download a single object. My question is, whether it is by Observable get object and show object in template?</p>
  
  <p>** service **</p>
  
  <pre><code>import { Injectable } from "@angular/core";
  import { AppParameters } from "../parameters";
  import { AuthHttp } from "angular2-jwt";
  import { AuthService } from "./auth.service";
  import { Response } from "@angular/http";
  import { Observable } from 'rxjs/Observable';
  import { UsersModel } from "../../models/models";
  import { GroupModel } from "../../models/models";
  
  @Injectable()
  
  export class ProfileService {
  
      private userUrl: string = AppParameters.ENDPOINT_URL + "/users";
      private groupUrl: string = AppParameters.ENDPOINT_URL + '/groups';
      private wallUrl: string = AppParameters.ENDPOINT_URL + "/posts/";
  
  
      constructor(
          private authHttp: AuthHttp,
          private authService: AuthService
      ){}
  
      getUsers(id) : Observable&lt;UsersModel&gt; {
              return this.authHttp.get(this.userUrl + '/' + id + '/')
                  .map(this.extractData)
                  .catch(this.handleError)
      }
  
      private extractData(res: Response) {
          let body = res.json();
          return body.data || { };
      }
  
      private handleError (error: any) {
          let errMsg = (error.message) ? error.message :
              error.status ? `${error.status} - ${error.statusText}` : 'Server error';
          console.error(errMsg);
          return Observable.throw(errMsg);
      }
  }
  </code></pre>
  
  <p>** component **</p>
  
  <pre><code>import { Component, OnInit } from "@angular/core";
  import { AppParameters } from "../../shared/parameters";
  import { ProfileConfig } from "./profile.config";
  import { UsersModel } from "../../models/models";
  import { ProfileService } from "../../shared/services/profile.service";
  import { ActivatedRoute } from "@angular/router";
  
  
  @Component({
      templateUrl: AppParameters.TEMPLATE_URL + ProfileConfig.COMPONENT_NAME + '/user.html',
      providers: [ ProfileService ]
  })
  
  export class UserComponent implements OnInit {
  
      user : number;
      data: UsersModel;
      errorMessage: string;
  
      constructor(
          private profileService: ProfileService,
          private route: ActivatedRoute,
      ){}
  
      ngOnInit() {
          this.getUser();
          this.getData();
      }
  
      getUser() {
          this.route.params
              .subscribe(params =&gt; {
                  this.user =+ params['id'];
              });
      }
  
      getData() {
          this.profileService.getUsers(this.user)
              .subscribe(
                  data =&gt; this.data = data,
                  error =&gt; this.errorMessage = &lt;any&gt;error
              );
      }
  }
  </code></pre>
  
  <p><strong>model</strong></p>
  
  <pre><code>export class UsersModel {
      id: number;
      username: string;
      email: string;
      user_profile: UserProfileModel;
  }
  
  class UserProfileModel {
      city: string;
      status: string;
      about: string;
  }
  </code></pre>