My Angular 2 application retrieves a JSON string, and I am looking to map its values to a model. According to my understanding, a TypeScript model file is used to assist in mapping an HTTP Get response to an object - in this case, a class named 'CustomObject'.
This is the TypeScript model file I have created for TypeScript to recognize:
export class CustomObject {
public Name: string;
}
Here is a snippet of what the JSON string looks like (slightly modified from Chrome dev tools):
"{
"EventType": 3,
"Description": "Test Description",
"LocationName": "DefaultLocation",
"Name": "TestName"
}"
I aim to take the 'Name' value ("TestName") from the JSON string and map it to an existing variable 'activeCustomObject' declared in my home.ts file, which is initially set to null:
public activeCustomObject: CustomObject = null;
However, after fetching the JSON response using the HTTP Get method, when I try to access {{activeCustomObject.Name}} in my HTML file, nothing gets printed. I have ensured proper imports and providers are set up.
This is how I am subscribing:
this._customObjectService.getCustomObject()
.subscribe(res => {
this.activeCustomObject = res;
});
And here is how I am calling the GET method:
getActiveCustomObject() {
return this._http.get('/test/customobject')
.map((response) => {
console.log(response);
return response.json;
});
}
Why does accessing {{activeCustomObject.Name}} not print anything in my HTML? The Chrome dev tools show that the JSON is returning a valid string with the necessary data (including the name). Since I intend to use other values from the JSON string, I cannot just have the HTTP GET return the name field alone. I need to understand why the returned JSON string is not correctly mapped to the Custom Object variable.