How to iterate to an array of json objects within the template using *ngFor directive

Ionic Framework ionic-v3
1

Hello guys, I’m new to ionic and I need some help, basically I got my data from the provider as in the following example:

Json data:

data: {
“error”: false,
“usrMessage”: “some message”,
“internalMessage”: “some internal message”,
“additionalInfos”: {
“key1”: 9,
“key2”: “802.70”,
“key3”: 1,
“key4”: “151.50”,
“key5”: 8,
“key6”: “651.20”
},
“reqDate”: “2018-01-07 18:45:27”,
“data”: [
{
“dataKey1”: “111”,
“dataKey2”: “aaa”,
“dataKey3”: “bbb”,
“dataKey4”: “ccc”,
“dataKey5”: “ddd”,
“dataKey6”: “eee”,
“dataKey7”: “fff”,
“dataKey8”: “ggg”
},
{
“dataKey1”: “111”,
“dataKey2”: “hhh”,
“dataKey3”: “iii”,
“dataKey4”: “jjj”,
“dataKey5”: “kkk”,
“dataKey6”: “lll”,
“dataKey7”: “mmm”,
“dataKey8”: “nnn”
},
{
…
}
]
}

Snippet code from my component .ts file:

myList: any[] = [];

loadData() {
// Received data from the promise object
this.myService.getJsonData()
.then(data => {
this.myList = [ {data} ];
});
}

Snippet code from my template (.html) file:
…

{{item.data.usrMessage}}; 

 <!-- Below code doesn't work -->
<div *ngFor="let subItem of myList.data">
    <p>
        {{subItem.dataKey1}}
    </p>
</div>
2

Hello,

Maybe it helps converting json via parse to js array.

Best reagrds, anna-liebt

3

Try

let subitem of myList.data.data

because your object has the name data and the array inside also has the name data.

4

Thanks Jacktoolsnet, the solution you proposed had fixed the issue.

cheers.
AJ