I am currently working with Angular 6.
Within the component file, I have an array object defined.
items: Array<ItemData>;
The interface ItemData has the following structure:
export interface FavouriteProductData {
id: number;
type: string;
content: string;
}
The content field contains data in a JSON encoded format.
'{"name":"Jonathan Suh","gender":"male"}';
When looping through the items in the template, I want to display the name field from the content.
<tr *ngFor="let i in items; id = index;">
<td> {{ i.type }} </td>
<td> {{ i.content.name }} </td>
</tr>
However, as the content is JSON encoded, I am facing difficulty displaying its contents in the template.
Is there a way to parse the JSON content within the template and store the parsed content in a new variable?
I attempted creating a method in the component:
jsonDecode(item) {
return JSON.parse(item.content);
}
And then using it in the template like this:
<tr *ngFor="let i in items; id = index; p = jsonDecode(i)">
<td> {{ i.type }} </td>
<td> {{ p.name }} </td>
</tr>
Unfortunately, this approach does not seem to be effective.