Nested JSON Data in Ionic - ionic-framework

Question

thanks in advance, I am using Ionic 4 for a mobile app and on a page there is a need to list out the nested data but I don't seem to be able to get it right.
Following is the JSON Data
"campaign_performance": {
"id": 11783,
"name": "calvinseng.com",
"mobile": "false",
"date_from": "2018-01-01",
"date_to": "2018-01-02",
"keywords": [
{
"id": 235505,
"name": "hot stamping printing",
"positions": {
"2018-01-01": 1,
"2018-01-02": 1
}
},
{
"id": 235506,
"name": "creative agency singapore",
"positions": {
"2018-01-01": 59,
"2018-01-02": 57
}
}
]
}
and on the page, the html that I did was
<ion-list color="primary" *ngFor="let campaign of userService.campaign_performance">
{{ campaign.name }}
<ng-container *ngFor="let keyword of userService.campaign_performance.keywords">
{{ keyword.id }}
</ng-container>
</ion-list>
But the html returned nothing in the View.
Was hoping to achieve something similar as attached. Any idea?

Answer 1

This looks like its more likely to be:
<ion-list color="primary" *ngFor="let campaign of userService.campaign_performance">
{{ campaign.name }}
<ng-container *ngFor="let keyword of campaign.keywords">
{{ keyword.id }}
</ng-container>
</ion-list>
You are looping each campaign_performance and assigning it to campaign.
So if you want to do an inner loop then you start from that variable and loop its individual contents.