I have 2 Custom Interfaces:
DataModel.ts
export interface Entry{
id: number,
content: Note
}
export interface Note{
message: string
}
These interfaces are utilized in typing the HttpClient get request to fetch an array of Entries:
DataService.ts
getEntries():Observable<DataModel.Entry[]>{
return this.http.get<DataModel.Entry[]>(DataService.API+'entries')
.pipe(
retry(3),
catchError(this.handleError)
);
The JSON data retrieved looks like this:
[
{
"id":12345,
"content":
"{\"message\":\"Example note\"}"
}
]
However, when attempting to access the 'message' property as defined in the Interface, the slashes interfere with proper conversion from JSON to the specified object structure.
this.dataService.getEntries().subscribe(entry=>{
console.log(entry[0].content); // {"message":"Example note"}
console.log(entry[0].content.message) // undefined
});
What is the most efficient approach to address this issue? Existing solutions found online seem complex and cumbersome. Surely Angular offers a more straightforward solution.