CODEWITHSUNDEEP
angular
user5740218
user5740218

Reputation:

How to show nested json data using ngFor in Angular 7

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"
      }
    ]
  }
}

Upvotes: 0

Views: 586

Answers (2)

Jayesh Vyas
Jayesh Vyas

Reputation: 1351

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.

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222710

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>

STACKBLITZ DEMO

Upvotes: 1

Related Questions