Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 70748

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

$
0
0

@agurrea wrote:

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>

Posts: 2

Participants: 2

Read full topic


Viewing all articles
Browse latest Browse all 70748

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>