I have been working through the Angular2 getting started guide to kickstart my own application development. So far, I have managed to retrieve JSON objects from a local file and display them in angular2 templates. However, the challenge arises when the structure of my JSON objects does not exactly match the expected structure for the Angular classes.
As my project progresses, I anticipate the need to work with JSON-LD data, which includes property names with characters like "@id". After some research, it seems that RxJS might offer the functionality I require. My goal is to customize the automatic binding process so that I can extract specific values labeled as "@id" from JSON data and assign them to corresponding properties within my Angular2 classes.
Currently, the code automatically generates an array of Person class instances:
getPeople(){
return this._http.get(this._peopleUrl)
.map(response => <Person[]> response.json().data)
.do(data => console.log(data)) //debug to console
.catch(this.handleError);
}
This code works well for JSON structures like the following:
[
{
"id":"1",
"name":"tessa"
},
{
"id":"2",
"name":"jacob"
}
]
However, it would encounter issues with JSON formats similar to this:
[
{
"@id":"1",
"name":"tessa"
},
{
"@id":"2",
"name":"jacob"
}
]
The Person class definition is straightforward (for now):
export class Person {
constructor(
public id:number,
public name:string,
){}
}
I am seeking guidance on resources or examples that demonstrate how to map complex or tricky JSON data to Angular2 classes. Any help would be greatly appreciated!