Angular observable object mapping issue
I am consuming an Observable and having issues getting it to map correctly to my model class. I fixed casing issues, per suggestions here, but changing my model to Camel casing didn't help entirely. Is data being bound to the httpresponse instead of my object?
My model class:
export class Lease implements ILease
public id: string;
public emailAddress: string;
public make: string;
public carModel: string;
public year: number;
...
My component.ts:
this.sub = this.leaseSvc.GetLease(this.id).subscribe(
(data: Lease) =>
console.log(this.lease);
console.log(this.lease.make); // undefined
console.log(this.lease.Value.make); // works but is wrong
...
My console output:
ContentType: null, SerializerSettings: null, StatusCode: null, Value: …ContentType: nullSerializerSettings: nullStatusCode: nullValue: carModel: "Sorento"currentMileage: 355emailAddress: "aaa@aaa.com"firstName: "Bill"id: "5be8925ea21e8b3ef0ac08e9"lastName: "Smith"leaseLength: 60leaseStartDate: "2018-11-01T04:00:00Z"leaseStartMileage: 10make: "Kia"mileSets: mileageOverageCharge: 0.2password: ""passwordHash: "$2b$10$QZbcf/sWOmBVjDlZ.LvIwOuGb6pq2EaIzZbuM4EhGyUYlFAC.7YlK"trackingInfo: leaseEndDate: "2023-11-01T04:00:00Z", totalMileageAlloted: 50000, mileageUsed: 345, percentageMileageUsed: 0.69, dailyAllotedMileage: 27.397260273972602, …year: "2018"yearlyMileageAllotment: 10000zipCode: "30303"proto: Object__proto__: Object
lease-stats.component.ts:41 undefined
lease-stats.component.ts:42 Kia
My service.ts code:
GetLease(id: string): Observable<Lease>
return this.http.get<Lease>(this.serviceUrl + id, this.secureHttpOptions);
angular
asked Nov 11 at 17:42
RJA
63
|
show 4 more comments
I am consuming an Observable and having issues getting it to map correctly to my model class. I fixed casing issues, per suggestions here, but changing my model to Camel casing didn't help entirely. Is data being bound to the httpresponse instead of my object?
My model class:
export class Lease implements ILease
public id: string;
public emailAddress: string;
public make: string;
public carModel: string;
public year: number;
...
My component.ts:
this.sub = this.leaseSvc.GetLease(this.id).subscribe(
(data: Lease) =>
console.log(this.lease);
console.log(this.lease.make); // undefined
console.log(this.lease.Value.make); // works but is wrong
...
My console output:
ContentType: null, SerializerSettings: null, StatusCode: null, Value: …ContentType: nullSerializerSettings: nullStatusCode: nullValue: carModel: "Sorento"currentMileage: 355emailAddress: "aaa@aaa.com"firstName: "Bill"id: "5be8925ea21e8b3ef0ac08e9"lastName: "Smith"leaseLength: 60leaseStartDate: "2018-11-01T04:00:00Z"leaseStartMileage: 10make: "Kia"mileSets: mileageOverageCharge: 0.2password: ""passwordHash: "$2b$10$QZbcf/sWOmBVjDlZ.LvIwOuGb6pq2EaIzZbuM4EhGyUYlFAC.7YlK"trackingInfo: leaseEndDate: "2023-11-01T04:00:00Z", totalMileageAlloted: 50000, mileageUsed: 345, percentageMileageUsed: 0.69, dailyAllotedMileage: 27.397260273972602, …year: "2018"yearlyMileageAllotment: 10000zipCode: "30303"proto: Object__proto__: Object
lease-stats.component.ts:41 undefined
lease-stats.component.ts:42 Kia
My service.ts code:
GetLease(id: string): Observable<Lease>
return this.http.get<Lease>(this.serviceUrl + id, this.secureHttpOptions);
angular
asked Nov 11 at 17:42
RJA
63
1
It should bethis.lease.make, usemakenotMake
– Pankaj Parkar
Nov 11 at 17:43
1
better close this question
– Sajeetharan
Nov 11 at 17:44
this.lease.make doesn't work because the model has "Make". I changed the model to "make" and this.lease.make still didn't work any differently.
– RJA
Nov 11 at 18:02
@RJA Can you change to log toconsole.log(JSON.stringify(this.lease);and let us know what it says? Also, can you please add the code forthis.leaseSvc.GetLease
– user184994
Nov 11 at 18:04
1
An interface defines the shape of an object. So it's perfectly suited here, since the goal is to describe how the POJO deserialized from JSON looks like. Using a class is lying to yourself, since it defines a concrete type, which will never be the type of the POJO deserialized from the JSON.
– JB Nizet
Nov 11 at 21:05
|
show 4 more comments
I am consuming an Observable and having issues getting it to map correctly to my model class. I fixed casing issues, per suggestions here, but changing my model to Camel casing didn't help entirely. Is data being bound to the httpresponse instead of my object?
My model class:
export class Lease implements ILease
public id: string;
public emailAddress: string;
public make: string;
public carModel: string;
public year: number;
...
My component.ts:
this.sub = this.leaseSvc.GetLease(this.id).subscribe(
(data: Lease) =>
console.log(this.lease);
console.log(this.lease.make); // undefined
console.log(this.lease.Value.make); // works but is wrong
...
My console output:
ContentType: null, SerializerSettings: null, StatusCode: null, Value: …ContentType: nullSerializerSettings: nullStatusCode: nullValue: carModel: "Sorento"currentMileage: 355emailAddress: "aaa@aaa.com"firstName: "Bill"id: "5be8925ea21e8b3ef0ac08e9"lastName: "Smith"leaseLength: 60leaseStartDate: "2018-11-01T04:00:00Z"leaseStartMileage: 10make: "Kia"mileSets: mileageOverageCharge: 0.2password: ""passwordHash: "$2b$10$QZbcf/sWOmBVjDlZ.LvIwOuGb6pq2EaIzZbuM4EhGyUYlFAC.7YlK"trackingInfo: leaseEndDate: "2023-11-01T04:00:00Z", totalMileageAlloted: 50000, mileageUsed: 345, percentageMileageUsed: 0.69, dailyAllotedMileage: 27.397260273972602, …year: "2018"yearlyMileageAllotment: 10000zipCode: "30303"proto: Object__proto__: Object
lease-stats.component.ts:41 undefined
lease-stats.component.ts:42 Kia
My service.ts code:
GetLease(id: string): Observable<Lease>
return this.http.get<Lease>(this.serviceUrl + id, this.secureHttpOptions);
angular
asked Nov 11 at 17:42
RJA
63
I am consuming an Observable and having issues getting it to map correctly to my model class. I fixed casing issues, per suggestions here, but changing my model to Camel casing didn't help entirely. Is data being bound to the httpresponse instead of my object?
My model class:
export class Lease implements ILease
public id: string;
public emailAddress: string;
public make: string;
public carModel: string;
public year: number;
...
My component.ts:
this.sub = this.leaseSvc.GetLease(this.id).subscribe(
(data: Lease) =>
console.log(this.lease);
console.log(this.lease.make); // undefined
console.log(this.lease.Value.make); // works but is wrong
...
My console output:
ContentType: null, SerializerSettings: null, StatusCode: null, Value: …ContentType: nullSerializerSettings: nullStatusCode: nullValue: carModel: "Sorento"currentMileage: 355emailAddress: "aaa@aaa.com"firstName: "Bill"id: "5be8925ea21e8b3ef0ac08e9"lastName: "Smith"leaseLength: 60leaseStartDate: "2018-11-01T04:00:00Z"leaseStartMileage: 10make: "Kia"mileSets: mileageOverageCharge: 0.2password: ""passwordHash: "$2b$10$QZbcf/sWOmBVjDlZ.LvIwOuGb6pq2EaIzZbuM4EhGyUYlFAC.7YlK"trackingInfo: leaseEndDate: "2023-11-01T04:00:00Z", totalMileageAlloted: 50000, mileageUsed: 345, percentageMileageUsed: 0.69, dailyAllotedMileage: 27.397260273972602, …year: "2018"yearlyMileageAllotment: 10000zipCode: "30303"proto: Object__proto__: Object
lease-stats.component.ts:41 undefined
lease-stats.component.ts:42 Kia
My service.ts code:
GetLease(id: string): Observable<Lease>
return this.http.get<Lease>(this.serviceUrl + id, this.secureHttpOptions);
angular
angular
asked Nov 11 at 17:42
RJA
63
asked Nov 11 at 17:42
RJA
63
edited Nov 11 at 22:58
asked Nov 11 at 17:42
RJA
63
asked Nov 11 at 17:42
RJA
63
asked Nov 11 at 17:42
RJA
63
63
1
It should bethis.lease.make, usemakenotMake
– Pankaj Parkar
Nov 11 at 17:43
1
better close this question
– Sajeetharan
Nov 11 at 17:44
this.lease.make doesn't work because the model has "Make". I changed the model to "make" and this.lease.make still didn't work any differently.
– RJA
Nov 11 at 18:02
@RJA Can you change to log toconsole.log(JSON.stringify(this.lease);and let us know what it says? Also, can you please add the code forthis.leaseSvc.GetLease
– user184994
Nov 11 at 18:04
1
An interface defines the shape of an object. So it's perfectly suited here, since the goal is to describe how the POJO deserialized from JSON looks like. Using a class is lying to yourself, since it defines a concrete type, which will never be the type of the POJO deserialized from the JSON.
– JB Nizet
Nov 11 at 21:05
|
show 4 more comments
1
It should bethis.lease.make, usemakenotMake
– Pankaj Parkar
Nov 11 at 17:43
1
better close this question
– Sajeetharan
Nov 11 at 17:44
this.lease.make doesn't work because the model has "Make". I changed the model to "make" and this.lease.make still didn't work any differently.
– RJA
Nov 11 at 18:02
@RJA Can you change to log toconsole.log(JSON.stringify(this.lease);and let us know what it says? Also, can you please add the code forthis.leaseSvc.GetLease
– user184994
Nov 11 at 18:04
1
An interface defines the shape of an object. So it's perfectly suited here, since the goal is to describe how the POJO deserialized from JSON looks like. Using a class is lying to yourself, since it defines a concrete type, which will never be the type of the POJO deserialized from the JSON.
– JB Nizet
Nov 11 at 21:05
1
1
It should be
this.lease.make, use make not Make– Pankaj Parkar
Nov 11 at 17:43
It should be
this.lease.make, use make not Make– Pankaj Parkar
Nov 11 at 17:43
1
1
better close this question
– Sajeetharan
Nov 11 at 17:44
better close this question
– Sajeetharan
Nov 11 at 17:44
this.lease.make doesn't work because the model has "Make". I changed the model to "make" and this.lease.make still didn't work any differently.
– RJA
Nov 11 at 18:02
this.lease.make doesn't work because the model has "Make". I changed the model to "make" and this.lease.make still didn't work any differently.
– RJA
Nov 11 at 18:02
@RJA Can you change to log to
console.log(JSON.stringify(this.lease); and let us know what it says? Also, can you please add the code for this.leaseSvc.GetLease– user184994
Nov 11 at 18:04
@RJA Can you change to log to
console.log(JSON.stringify(this.lease); and let us know what it says? Also, can you please add the code for this.leaseSvc.GetLease– user184994
Nov 11 at 18:04
1
1
An interface defines the shape of an object. So it's perfectly suited here, since the goal is to describe how the POJO deserialized from JSON looks like. Using a class is lying to yourself, since it defines a concrete type, which will never be the type of the POJO deserialized from the JSON.
– JB Nizet
Nov 11 at 21:05
An interface defines the shape of an object. So it's perfectly suited here, since the goal is to describe how the POJO deserialized from JSON looks like. Using a class is lying to yourself, since it defines a concrete type, which will never be the type of the POJO deserialized from the JSON.
– JB Nizet
Nov 11 at 21:05
|
show 4 more comments
1 Answer
1
active
oldest
votes
The issue was in the .Net Core RESTful service this Angular app was calling. It was returning a JsonResult which had the expected object under a "Value" element. The original Pascal casing of the class in Angular was probably also an issue originally.
answered Nov 12 at 4:26
RJA
63
add a comment |
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
);
);
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%2f53251453%2fangular-observable-object-mapping-issue%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The issue was in the .Net Core RESTful service this Angular app was calling. It was returning a JsonResult which had the expected object under a "Value" element. The original Pascal casing of the class in Angular was probably also an issue originally.
answered Nov 12 at 4:26
RJA
63
add a comment |
The issue was in the .Net Core RESTful service this Angular app was calling. It was returning a JsonResult which had the expected object under a "Value" element. The original Pascal casing of the class in Angular was probably also an issue originally.
answered Nov 12 at 4:26
RJA
63
add a comment |
The issue was in the .Net Core RESTful service this Angular app was calling. It was returning a JsonResult which had the expected object under a "Value" element. The original Pascal casing of the class in Angular was probably also an issue originally.
answered Nov 12 at 4:26
RJA
63
The issue was in the .Net Core RESTful service this Angular app was calling. It was returning a JsonResult which had the expected object under a "Value" element. The original Pascal casing of the class in Angular was probably also an issue originally.
answered Nov 12 at 4:26
RJA
63
answered Nov 12 at 4:26
RJA
63
answered Nov 12 at 4:26
RJA
63
answered Nov 12 at 4:26
RJA
63
63
add a comment |
add a comment |
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.
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%2f53251453%2fangular-observable-object-mapping-issue%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
It should be
this.lease.make, usemakenotMake– Pankaj Parkar
Nov 11 at 17:43
1
better close this question
– Sajeetharan
Nov 11 at 17:44
this.lease.make doesn't work because the model has "Make". I changed the model to "make" and this.lease.make still didn't work any differently.
– RJA
Nov 11 at 18:02
@RJA Can you change to log to
console.log(JSON.stringify(this.lease);and let us know what it says? Also, can you please add the code forthis.leaseSvc.GetLease– user184994
Nov 11 at 18:04
1
An interface defines the shape of an object. So it's perfectly suited here, since the goal is to describe how the POJO deserialized from JSON looks like. Using a class is lying to yourself, since it defines a concrete type, which will never be the type of the POJO deserialized from the JSON.
– JB Nizet
Nov 11 at 21:05