JSON data fails to map to my exported interface? - json

Question

I can't bind my Angular HTML to my devices array because there is a mismatch between what I am expecting the object to look like. I want to bind to device.modelName but it fails because the object I'm actually getting back has the property ModelName without camelCase!
Googling a solution I saw that I should use type assertion so I did by adding <DeviceStatus[]> resulting in the line <DeviceStatus[]>response.json()); in my component class. Unfortunately this didn't seem to change anything.
Why does it seem like my json object isn't being mapped properly?
My model interface:
export interface DeviceStatus {
deviceId: string;
modelName: string;
}
My component:
export class FetchDataComponent {
public devices: Observable<DeviceStatus[]>;
constructor(http: Http) {
this.devices =
http.get('api/Devices')
.map((response: Response) => <DeviceStatus[]>response.json());
this.devices.subscribe(x => console.log(x));
}
}
The result in Chrome console:
(2) [Object, Object]
0: Object
DeviceId: "1"
ModelName: "Model Name"
...

Answer 1

Type assertion only informs the compiler, it does nothing to the actual data as it says in the docs:
A type assertion is like a type cast in other languages, but performs
no special checking or restructuring of data
Always remember that the type system in typescript doesn't get translated to javascript, so in runtime you don't have that.
You'll need to do the convertion yourself:
this.devices =
http.get('api/Devices')
.map((response: Response) => response.json().map(device => ({
deviceId: device.DeviceId,
modelName: device.ModelName
}));

Answer 2

Here is the ASP.NET code using the formatter:
config.Formatters.JsonFormatter.SerializerSettings.ContractResolver=
new CamelCasePropertyNamesContractResolver();
It converts the properties to camel case before returning them in the response.
You can find out more about it here: http://www.newtonsoft.com/json/help/html/T_Newtonsoft_Json_Serialization_CamelCasePropertyNamesContractResolver.htm
And there is a more complete example in this post here: Web API 2: how to return JSON with camelCased property names, on objects and their sub-objects