Iterate nested JSON array in angular 2

Question

Following is my json file. I want to iterate rewards array only. The following stuff iterate in *ngFor. I am iterating like this

<ul *ngFor="let rew of gdata?.rewards">
     <li> {{rew.rewardID}} </li>
</ul>

if anyone please help me I have searched lot.

gdata = [
 {
"id": 18,
"gname": "Learning Ramayanam",
"goalCategory": "Education",
"goalSubCategory": "Half-yearly",
"goalDesc": "good",
"rowStatusCode": "I",
"createID": "1",
"createTS": null,
"updateID": "Ram",
"updateTS": null,
"rewards": [
  {
    "rewardID": 25,
    "rewardName": "Amazon - pts",
    "rowStatusCode": "I",
    "createID": "1",
    "createTS": 1493785361000,
    "updateID": null,
    "updateTS": null
  },
  {
    "rewardID": 6,
    "rewardName": "Trends - 100000pts",
    "rowStatusCode": "U",
    "createID": "1",
    "createTS": 1493131878000,
    "updateID": null,
    "updateTS": null
  }
],
"initiatives": {
  "initID": 17,
  "initAction": "Stop",
  "startDate": "2017-04-27",
  "targetDate": "2017-04-30",
  "rowStatusCode": "U",
  "createID": "1",
  "createTS": 1493294143000,
  "updateID": null,
  "updateTS": null,
  "status": "red"
  }
 },

Pengyy · Accepted Answer · 2017-05-03 08:51:02Z

2

If you have only one item in gdata, you can do it with a single ngFor as below:

<ul>
    <li *ngFor="let rew of gdata[0]?.rewards">{{rew.rewardID}}</li>
</ul>

Else if you have multiple items in gdata, you may need nested ngFor to generate multiple lists.

<ul *ngFor="let data of gdata">
    <li *ngFor="let rew of data?.rewards">{{rew.rewardID}}</li>
</ul>

refer plunker.

answered May 3, 2017 at 8:51

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Iterate nested JSON array in angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related