Getting [object Object] after getting http response using subscribe in Angular 2
1
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]
angular angularjs-directive angular2-routing angular-services
edited May 29 '17 at 7:30
Suraj Rao
22.6k75469
asked May 29 '17 at 7:03
Lovepreet Singh
41
add a comment |
1
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]
angular angularjs-directive angular2-routing angular-services
edited May 29 '17 at 7:30
Suraj Rao
22.6k75469
asked May 29 '17 at 7:03
Lovepreet Singh
41
1
console.log('before component ' + JSON.stringify(res));
– Shota
May 29 '17 at 7:05
@Shota doconsole.log(JSON.stringify(res,undefined,2))to pretty print
– Suraj Rao
May 29 '17 at 7:06
Thanks, console.log('before component ', res); is also another option.
– Shota
May 29 '17 at 7:07
Also why are you printingresbefore and after? its value doesnt look like it changed?
– Suraj Rao
May 29 '17 at 7:08
add a comment |
1
1
1
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]
angular angularjs-directive angular2-routing angular-services
edited May 29 '17 at 7:30
Suraj Rao
22.6k75469
asked May 29 '17 at 7:03
Lovepreet Singh
41
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]
angular angularjs-directive angular2-routing angular-services
angular angularjs-directive angular2-routing angular-services
edited May 29 '17 at 7:30
Suraj Rao
22.6k75469
asked May 29 '17 at 7:03
Lovepreet Singh
41
edited May 29 '17 at 7:30
Suraj Rao
22.6k75469
asked May 29 '17 at 7:03
Lovepreet Singh
41
edited May 29 '17 at 7:30
Suraj Rao
22.6k75469
edited May 29 '17 at 7:30
Suraj Rao
22.6k75469
edited May 29 '17 at 7:30
Suraj Rao
22.6k75469
22.6k75469
asked May 29 '17 at 7:03
Lovepreet Singh
41
asked May 29 '17 at 7:03
Lovepreet Singh
41
asked May 29 '17 at 7:03
Lovepreet Singh
41
41
1
console.log('before component ' + JSON.stringify(res));
– Shota
May 29 '17 at 7:05
@Shota doconsole.log(JSON.stringify(res,undefined,2))to pretty print
– Suraj Rao
May 29 '17 at 7:06
Thanks, console.log('before component ', res); is also another option.
– Shota
May 29 '17 at 7:07
Also why are you printingresbefore and after? its value doesnt look like it changed?
– Suraj Rao
May 29 '17 at 7:08
add a comment |
1
console.log('before component ' + JSON.stringify(res));
– Shota
May 29 '17 at 7:05
@Shota doconsole.log(JSON.stringify(res,undefined,2))to pretty print
– Suraj Rao
May 29 '17 at 7:06
Thanks, console.log('before component ', res); is also another option.
– Shota
May 29 '17 at 7:07
Also why are you printingresbefore and after? its value doesnt look like it changed?
– Suraj Rao
May 29 '17 at 7:08
1
1
console.log('before component ' + JSON.stringify(res));
– Shota
May 29 '17 at 7:05
console.log('before component ' + JSON.stringify(res));
– Shota
May 29 '17 at 7:05
@Shota do
console.log(JSON.stringify(res,undefined,2)) to pretty print– Suraj Rao
May 29 '17 at 7:06
@Shota do
console.log(JSON.stringify(res,undefined,2)) to pretty print– Suraj Rao
May 29 '17 at 7:06
Thanks, console.log('before component ', res); is also another option.
– Shota
May 29 '17 at 7:07
Thanks, console.log('before component ', res); is also another option.
– Shota
May 29 '17 at 7:07
Also why are you printing
res before and after? its value doesnt look like it changed?– Suraj Rao
May 29 '17 at 7:08
Also why are you printing
res before and after? its value doesnt look like it changed?– Suraj Rao
May 29 '17 at 7:08
add a comment |
3 Answers
3
active
oldest
votes
3
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.
answered May 29 '17 at 7:06
Jeff Huijsmans
8021023
add a comment |
2
You need to do JSON.stringify
console.log('before component ' + JSON.stringify(res));
answered May 29 '17 at 7:05
Sajeetharan
116k27162221
add a comment |
1
You could also do the following:
console.log('before component',JSON.stringify(res,undefined,2))
to pretty print [Object object] as json object.
answered May 29 '17 at 7:07
Suraj Rao
22.6k75469
But still i am not able to get desired result in this.product object. before component { "productId": 1, "productName": "Garden Cart", "productCode": "GDN-0023", "releaseDate": "March 18, 2016", "price": 32.99, "description": "15 gallon capacity rolling garden cart", "starRating": 4.2, "imageUrl": "app/Images/a.png" }product-detail.component.ts:38 after component [object Object] console.log('after component ' + this.product);
– Lovepreet Singh
May 29 '17 at 7:13
what are you getting and what are you expecting? print using JSON.stringify after also
– Suraj Rao
May 29 '17 at 7:15
i need to bind json result to product object
– Lovepreet Singh
May 29 '17 at 7:16
As I said useconsole.log('after component',JSON.stringify(this.product,undefined,2))
– Suraj Rao
May 29 '17 at 7:17
But when doing this this.product = JSON.stringify(this.product,undefined,2); i am getting this error "string is not assignable to type IProduct"
– Lovepreet Singh
May 29 '17 at 7:29
|
show 5 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f44236398%2fgetting-object-object-after-getting-http-response-using-subscribe-in-angular-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
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.
answered May 29 '17 at 7:06
Jeff Huijsmans
8021023
add a comment |
3
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.
answered May 29 '17 at 7:06
Jeff Huijsmans
8021023
add a comment |
3
3
3
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.
answered May 29 '17 at 7:06
Jeff Huijsmans
8021023
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.
answered May 29 '17 at 7:06
Jeff Huijsmans
8021023
answered May 29 '17 at 7:06
Jeff Huijsmans
8021023
answered May 29 '17 at 7:06
Jeff Huijsmans
8021023
answered May 29 '17 at 7:06
Jeff Huijsmans
8021023
8021023
add a comment |
add a comment |
2
You need to do JSON.stringify
console.log('before component ' + JSON.stringify(res));
answered May 29 '17 at 7:05
Sajeetharan
116k27162221
add a comment |
2
You need to do JSON.stringify
console.log('before component ' + JSON.stringify(res));
answered May 29 '17 at 7:05
Sajeetharan
116k27162221
add a comment |
2
2
2
You need to do JSON.stringify
console.log('before component ' + JSON.stringify(res));
answered May 29 '17 at 7:05
Sajeetharan
116k27162221
You need to do JSON.stringify
console.log('before component ' + JSON.stringify(res));
answered May 29 '17 at 7:05
Sajeetharan
116k27162221
answered May 29 '17 at 7:05
Sajeetharan
116k27162221
answered May 29 '17 at 7:05
Sajeetharan
116k27162221
answered May 29 '17 at 7:05
Sajeetharan
116k27162221
116k27162221
add a comment |
add a comment |
1
You could also do the following:
console.log('before component',JSON.stringify(res,undefined,2))
to pretty print [Object object] as json object.
answered May 29 '17 at 7:07
Suraj Rao
22.6k75469
But still i am not able to get desired result in this.product object. before component { "productId": 1, "productName": "Garden Cart", "productCode": "GDN-0023", "releaseDate": "March 18, 2016", "price": 32.99, "description": "15 gallon capacity rolling garden cart", "starRating": 4.2, "imageUrl": "app/Images/a.png" }product-detail.component.ts:38 after component [object Object] console.log('after component ' + this.product);
– Lovepreet Singh
May 29 '17 at 7:13
what are you getting and what are you expecting? print using JSON.stringify after also
– Suraj Rao
May 29 '17 at 7:15
i need to bind json result to product object
– Lovepreet Singh
May 29 '17 at 7:16
As I said useconsole.log('after component',JSON.stringify(this.product,undefined,2))
– Suraj Rao
May 29 '17 at 7:17
But when doing this this.product = JSON.stringify(this.product,undefined,2); i am getting this error "string is not assignable to type IProduct"
– Lovepreet Singh
May 29 '17 at 7:29
|
show 5 more comments
1
You could also do the following:
console.log('before component',JSON.stringify(res,undefined,2))
to pretty print [Object object] as json object.
answered May 29 '17 at 7:07
Suraj Rao
22.6k75469
But still i am not able to get desired result in this.product object. before component { "productId": 1, "productName": "Garden Cart", "productCode": "GDN-0023", "releaseDate": "March 18, 2016", "price": 32.99, "description": "15 gallon capacity rolling garden cart", "starRating": 4.2, "imageUrl": "app/Images/a.png" }product-detail.component.ts:38 after component [object Object] console.log('after component ' + this.product);
– Lovepreet Singh
May 29 '17 at 7:13
what are you getting and what are you expecting? print using JSON.stringify after also
– Suraj Rao
May 29 '17 at 7:15
i need to bind json result to product object
– Lovepreet Singh
May 29 '17 at 7:16
As I said useconsole.log('after component',JSON.stringify(this.product,undefined,2))
– Suraj Rao
May 29 '17 at 7:17
But when doing this this.product = JSON.stringify(this.product,undefined,2); i am getting this error "string is not assignable to type IProduct"
– Lovepreet Singh
May 29 '17 at 7:29
|
show 5 more comments
1
1
1
You could also do the following:
console.log('before component',JSON.stringify(res,undefined,2))
to pretty print [Object object] as json object.
answered May 29 '17 at 7:07
Suraj Rao
22.6k75469
You could also do the following:
console.log('before component',JSON.stringify(res,undefined,2))
to pretty print [Object object] as json object.
answered May 29 '17 at 7:07
Suraj Rao
22.6k75469
answered May 29 '17 at 7:07
Suraj Rao
22.6k75469
answered May 29 '17 at 7:07
Suraj Rao
22.6k75469
answered May 29 '17 at 7:07
Suraj Rao
22.6k75469
22.6k75469
But still i am not able to get desired result in this.product object. before component { "productId": 1, "productName": "Garden Cart", "productCode": "GDN-0023", "releaseDate": "March 18, 2016", "price": 32.99, "description": "15 gallon capacity rolling garden cart", "starRating": 4.2, "imageUrl": "app/Images/a.png" }product-detail.component.ts:38 after component [object Object] console.log('after component ' + this.product);
– Lovepreet Singh
May 29 '17 at 7:13
what are you getting and what are you expecting? print using JSON.stringify after also
– Suraj Rao
May 29 '17 at 7:15
i need to bind json result to product object
– Lovepreet Singh
May 29 '17 at 7:16
As I said useconsole.log('after component',JSON.stringify(this.product,undefined,2))
– Suraj Rao
May 29 '17 at 7:17
But when doing this this.product = JSON.stringify(this.product,undefined,2); i am getting this error "string is not assignable to type IProduct"
– Lovepreet Singh
May 29 '17 at 7:29
|
show 5 more comments
But still i am not able to get desired result in this.product object. before component { "productId": 1, "productName": "Garden Cart", "productCode": "GDN-0023", "releaseDate": "March 18, 2016", "price": 32.99, "description": "15 gallon capacity rolling garden cart", "starRating": 4.2, "imageUrl": "app/Images/a.png" }product-detail.component.ts:38 after component [object Object] console.log('after component ' + this.product);
– Lovepreet Singh
May 29 '17 at 7:13
what are you getting and what are you expecting? print using JSON.stringify after also
– Suraj Rao
May 29 '17 at 7:15
i need to bind json result to product object
– Lovepreet Singh
May 29 '17 at 7:16
As I said useconsole.log('after component',JSON.stringify(this.product,undefined,2))
– Suraj Rao
May 29 '17 at 7:17
But when doing this this.product = JSON.stringify(this.product,undefined,2); i am getting this error "string is not assignable to type IProduct"
– Lovepreet Singh
May 29 '17 at 7:29
But still i am not able to get desired result in this.product object. before component { "productId": 1, "productName": "Garden Cart", "productCode": "GDN-0023", "releaseDate": "March 18, 2016", "price": 32.99, "description": "15 gallon capacity rolling garden cart", "starRating": 4.2, "imageUrl": "app/Images/a.png" }product-detail.component.ts:38 after component [object Object] console.log('after component ' + this.product);
– Lovepreet Singh
May 29 '17 at 7:13
But still i am not able to get desired result in this.product object. before component { "productId": 1, "productName": "Garden Cart", "productCode": "GDN-0023", "releaseDate": "March 18, 2016", "price": 32.99, "description": "15 gallon capacity rolling garden cart", "starRating": 4.2, "imageUrl": "app/Images/a.png" }product-detail.component.ts:38 after component [object Object] console.log('after component ' + this.product);
– Lovepreet Singh
May 29 '17 at 7:13
what are you getting and what are you expecting? print using JSON.stringify after also
– Suraj Rao
May 29 '17 at 7:15
what are you getting and what are you expecting? print using JSON.stringify after also
– Suraj Rao
May 29 '17 at 7:15
i need to bind json result to product object
– Lovepreet Singh
May 29 '17 at 7:16
i need to bind json result to product object
– Lovepreet Singh
May 29 '17 at 7:16
As I said use
console.log('after component',JSON.stringify(this.product,undefined,2))– Suraj Rao
May 29 '17 at 7:17
As I said use
console.log('after component',JSON.stringify(this.product,undefined,2))– Suraj Rao
May 29 '17 at 7:17
But when doing this this.product = JSON.stringify(this.product,undefined,2); i am getting this error "string is not assignable to type IProduct"
– Lovepreet Singh
May 29 '17 at 7:29
But when doing this this.product = JSON.stringify(this.product,undefined,2); i am getting this error "string is not assignable to type IProduct"
– Lovepreet Singh
May 29 '17 at 7:29
|
show 5 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f44236398%2fgetting-object-object-after-getting-http-response-using-subscribe-in-angular-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
console.log('before component ' + JSON.stringify(res));
– Shota
May 29 '17 at 7:05
@Shota do
console.log(JSON.stringify(res,undefined,2))to pretty print– Suraj Rao
May 29 '17 at 7:06
Thanks, console.log('before component ', res); is also another option.
– Shota
May 29 '17 at 7:07
Also why are you printing
resbefore and after? its value doesnt look like it changed?– Suraj Rao
May 29 '17 at 7:08