Getting [object Object] after getting http response using subscribe in Angular 2

Question

ProductService.ts

   getProduct(id: number): Observable<IProduct> {

    return this._http.get(this._productUrl + '/GetById/' + 
           id).map((response: Response) => <IProduct>response.json())           
        .catch(this.errorHandler);     
}

ProductDetailComponent.ts

   getProduct(id: number) {
    this._productService.getProduct(id).subscribe(
        res => {               
            console.log('before component ' + res);     
            this.product = res;
            console.log('after component ' + res);                
        },
        error => this.errorMessage = <any>error),
        console.log('execution complete'); 
}

When receiving result in subscribe it is coming as
execution complete, before component [object Object], after component [object Object]

Answer 1

You need to do JSON.stringify

console.log('before component ' + JSON.stringify(res));  

Answer 2

You are using string concatenation (using the + sign). This way, Javascript will first convert the Object to a string ([object Object]). If you don't want that, you could try it like this: console.log('before component', res).

Note the comma, not a +. This passes the object to console.log as a separate parameter, allowing your browser or CLI to do the rendering. For instance, this way (in the browser) you can expand or collapse the object.