nested json in angular 2

Question

Below is my json i want to bind this into table. Looking at the gname: cricket in the JSON, you can see that there are two rewards for it (Flipkart and Amazon).

Looking at the above picture, you can see that cricket rewards are printed in two td:s, I would like to instead create two lines for cricket, one with Reward flipkart an one for Amazon) So my expected output would be:

Here is my JSON.

[  
   {  
      "id":18,
      "gname":"Learning Ramayanam",
      "goalCategory":"Education",
      "goalSubCategory":"Half-yearly",
      "goalDesc":"good",
      "rowStatusCode":"I",
      "createID":"1",
      "createTS":null,
      "updateID":"Ram",
      "updateTS":null,
      "rewards":[  
         {  
            "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"
      }
   },
   {  
      "id":21,
      "gname":"cricket",
      "goalCategory":"Sports",
      "goalSubCategory":"Annual",
      "goalDesc":"ambition",
      "rowStatusCode":"I",
      "createID":"1",
      "createTS":null,
      "updateID":null,
      "updateTS":null,
      "rewards":[  
         {  
            "rewardID":23,
            "rewardName":"Amazon - 900000pts",
            "rowStatusCode":"U",
            "createID":"1",
            "createTS":1493386415000,
            "updateID":null,
            "updateTS":null
         },
         {  
            "rewardID":17,
            "rewardName":"Amazon - pts",
            "rowStatusCode":"D",
            "createID":"1",
            "createTS":1493360706000,
            "updateID":null,
            "updateTS":null
         }
      ],
      "initiatives":{  
         "initID":19,
         "initAction":"Start",
         "startDate":"2017-04-04",
         "targetDate":"2017-04-20",
         "rowStatusCode":"U",
         "createID":"1",
         "createTS":1493360896000,
         "updateID":null,
         "updateTS":null,
         "status":"grey"
      }
   },
   {  
      "id":31,
      "gname":"Learn android nogut",
      "goalCategory":"Education",
      "goalSubCategory":"Half-yearly",
      "goalDesc":"education",
      "rowStatusCode":"I",
      "createID":"1",
      "createTS":1493219925000,
      "updateID":null,
      "updateTS":null,
      "rewards":[  

      ],
      "initiatives":{  
         "initID":22,
         "initAction":"Achieve",
         "startDate":"2017-04-04",
         "targetDate":"2017-04-13",
         "rowStatusCode":"U",
         "createID":"1",
         "createTS":1493363220000,
         "updateID":null,
         "updateTS":null,
         "status":"green"
      }
   },
   {  
      "id":35,
      "gname":"Learning Japanese",
      "goalCategory":"Education",
      "goalSubCategory":"Half-yearly",
      "goalDesc":"Goal",
      "rowStatusCode":"i",
      "createID":"1",
      "createTS":1493361641000,
      "updateID":null,
      "updateTS":null,
      "rewards":[  
         {  
            "rewardID":18,
            "rewardName":"Flipkart - 5000pts",
            "rowStatusCode":"U",
            "createID":"1",
            "createTS":1493361655000,
            "updateID":null,
            "updateTS":null
         }
      ],
      "initiatives":{  
         "initID":21,
         "initAction": "Soft Skills,Communication class,Tution Center,Organic Foods,Coaching Class,Other",
         "startDate":"undefined",
         "targetDate":"undefined",
         "rowStatusCode":"U",
         "createID":"1",
         "createTS":1493363132000,
         "updateID":null,
         "updateTS":null,
         "status":"green"
      }
   }
]

It's not clear what you are asking for, what you want to achieve and neither what you did so far. At least from what I understood. — SrAxi, May 02 '17 at 11:20
just see my json id=21 it have two rewards. I have to bind like this row1 -> 21,cricket,sports,sports,flipkart - pts row2-> 21,cricket,sports,sports,amazon- 900000ptspts — I am Naresh, May 02 '17 at 11:22

score 0 · Accepted Answer · answered May 02 '17 at 15:48

0

We can make use of ng-container here to reach your desired result, where we wrap each object you have inside a container. So your template would look like this:

<table>
  <tbody>
    <tr>
      <th>Goal Name</th>
      <th>Category</th>
      <th>Rewards</th>
    </tr>
  </tbody>
  <!-- Let's wrap each object in a ng-container -->
  <ng-container *ngFor="let goal of goals">
    <tbody>
      <!-- Iterate the rewards of each goal -->
      <tr *ngFor="let reward of goal.rewards">
        <td>{{goal.gname}}</td>
        <td>{{goal.goalCategory}}</td>
        <td>{{reward.rewardName}}</td>
      </tr>
    </tbody>
  </ng-container>
</table>

Demo

answered May 02 '17 at 15:48

AT82

71,416
24
140
167

As far as I know, it's not valid html to have multiple `tbody` in `table`. – Loïc Faure-Lacroix May 05 '17 at 12:45
http://stackoverflow.com/questions/3076708/can-we-have-multiple-tbody-in-same-table According to that it's valid, but if I'm wrong, the `tbody`s can both be replaced with `ng-container` as well :) – AT82 May 05 '17 at 13:45
https://www.w3.org/TR/html401/struct/tables.html#h-11.2.1 Ah yeah, it's apparently valid according to the html 4.0.1 spec. – Loïc Faure-Lacroix May 05 '17 at 15:18

nested json in angular 2

1 Answers1

Demo