I tried with few techniques but still I can't figure out it so what is the best way to show this data using angular *ngFor loop
"data": {
"live": [
{
"name": "First",
"image": "XXXX",
"description": "Blockchain Technology",
"timezone": "UTC+0"
},
{
"name": "First",
"image": "XXXX",
"description": "Blockchain Technology",
"timezone": "UTC+0"
}
]
}
}
You actually do not need nested ngFor, you could just use it as follows,
<ul>
<li *ngFor="let myObj of myData.data.live">
{{ myObj.description }}
</li>
</ul>
try with this Hope it will help you. In your component.ts file access the data from your JSON file like below.
yourdata: any = [];
this.httpService.get('./assets/yourjsonfile.json').subscribe(
data => {
this.yourdata = data as string [];
},
(err: HttpErrorResponse) => {
console.log (err.message);
}
);
then in your component.html file try to access the content of the yourdata variable which we declared in the component.ts file as follows.
<div *ngFor="let Data of yourdata>
{{ Data.data.live.name}}
{{ Data.data.live.image}}
{{ Data.data.live.description}}
{{ Data.data.live.timezone}}
</div>
it will print your JSON data on your UI application.
<div *ngFor="let h of data.live">{{h.name}}</div>