title: Getting [object Object] while mapping http response in Angular 2
body: <p>I am getting an [object Object] while using Observable map in angular 2.</p>
  
  <p>Here is the response object from the API service.</p>
  
  <pre><code>{
    "isSuccess": true,
    "message": "Connection Successfull",
    "data": [
      {
        "marketId": 1,
        "city": "san",
        "cityF": "san",
        "name": null,
        "nameF": "hello",
        "sortOrder": 1,
        "isActive": true
      },
      {
        "marketId": 2,
        "city": "san",
        "cityF": "san",
        "name": null,
        "nameF": "hello",
        "sortOrder": 1,
        "isActive": true
      },
      {
        "marketId": 3,
        "city": "san",
        "cityF": "san",
        "name": null,
        "nameF": "hello",
        "sortOrder": 1,
        "isActive": true
      },
      {
        "marketId": 4,
        "city": "san",
        "cityF": "san",
        "name": null,
        "nameF": "hello",
        "sortOrder": 1,
        "isActive": true
      }
    ],
    "exceptionErrorMessage": null,
    "errorCode": 0,
    "successMessage": null
  }
  </code></pre>
  
  <p>Here is the model I have created to map with the response.</p>
  
  <pre><code>export class MarketViewModel 
  {
  public isSuccess: boolean;
  public message : string;
  public successMessage : string;
  public exceptionErrorMessage : string;
  public errorCode: number;
  public data: MarketListObject[];
  
  }
  export class MarketListObject 
  {
      public marketId : number;
      public city: string;
      public cityF : string;
      public name : string;
      public nameF : string;
      public sortOrder : number;
      public isActive : boolean; 
  }
  </code></pre>
  
  <p>Service class to call the http and map the response.</p>
  
  <pre><code>import { Headers, RequestOptions } from '@angular/http';
  import { Router, ActivatedRoute, Params } from '@angular/router';
  import { MarketViewModel} from "../ViewModel/Market.ViewModel";
  import { Injectable }     from '@angular/core';
  import { Http, Response } from '@angular/http';
  import {Observable} from 'rxjs/Rx';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/catch';
  
  @Injectable()
  export class DashBoardService {
      private MarketUrl = "DashBoard/GetMarketList";
      private ResponseData: any;
      constructor(private http: Http, private router: Router, private  marketModel : MarketViewModel) {}
  
      public GetMarketListCall() :Observable&lt;MarketViewModel&gt; {
           return this.http.get(this.MarketUrl).map(this.extractData)
                      .catch(this.handleError);
      } 
  private extractData(res: Response) {
      let body = res.json();
          console.log("Body Data = "+body.data);
      return body.data || { };
    }
  </code></pre>
  
  <p>Here is the Component.ts which is calling Service.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { MarketViewModel} from "../ViewModel/Market.ViewModel";
  import { DashBoardService} from "../Service/DashBoard.Service";
  import { Observable } from 'rxjs/Observable';
  
   @Component({
       selector: 'Market-app',
      templateUrl: 'DashBoard/MarketListView',
      providers: [DashBoardService, MarketViewModel]
   })
  
  export class MarketComponent {
    constructor(private DashBoardservice: DashBoardService, private  marketModel : MarketViewModel) {
     }
  
  ngOnInit() {
          this.DashBoardservice.GetMarketListCall().subscribe(
                                 data =&gt; {this.marketModel = data;
                                      console.log("this"+this.marketModel); }, 
                                  err =&gt; {console.log(err);});
  }
  }
  </code></pre>
  
  <p>When I see to the console I am getting <strong>[object Object]</strong> response. Where is the mistake I am not able to figure it out</p>