Displaying JSON data in HTML table using angularjs ng-repeat directive

Question

I am having trouble displaying the following json data in my html table using angular js ng-repeat directive

<thead>
 <tr>
  <th ng-repeat="(header, value) in gridheader">{{value}}</th>
 </tr>
</thead>
<tbody>
 <tr ng-repeat="row  in data">
      <span ng-repeat="r  in row track by $index" >
  <td>{{row[r].TrnId}}</td>
  <td>{{row[r].TrnDate}}</td>
  <td>{{row[r].SavingsMonth}}</td>
  <td>{{row[r].SavingsYear}}</td>
  <td>{{row[r].AccountName}}</td>
  <td>{{row[r].SavingsAdded}}</td>
  <td>{{row[r].SavingsRemoved}}</td>
  <td>{{row[r].SavingsRunningBalance}}</td>
      </span>
 </tr>
</tbody>

I am picking this Json data from an angular JS controller and the returned from the resolve object is as shown below. This has really taken me whirlwind of sleepless nights to decipher but all in vain the Json Data:

   {
"rows": [
    {
        "TrnId": 217,
        "TrnDate": "2016-12-30T21:00:00.000Z",
        "SavingsMonth": "DECEMBER",
        "SavingsYear": "2016",
        "AccountName": "ABELUN STEPHENSON",
        "SavingsAdded": "3100000.0",
        "SavingsRemoved": "50000",
        "SavingsRunningBalance": "3050000"
    },
    {
        "TrnId": 218,
        "TrnDate": "2016-12-30T21:00:00.000Z",
        "SavingsMonth": "DECEMBER",
        "SavingsYear": "2016",
        "AccountName": "ACAN MOLLY NINA",
        "SavingsAdded": "3100000.0",
        "SavingsRemoved": "50000",
        "SavingsRunningBalance": "3050000"
    },
    {
        "TrnId": 219,
        "TrnDate": "2016-12-30T21:00:00.000Z",
        "SavingsMonth": "DECEMBER",
        "SavingsYear": "2016",
        "AccountName": "ADONYO HARRIET TIWAALI",
        "SavingsAdded": "5100000.0",
        "SavingsRemoved": "-",
        "SavingsRunningBalance": "5100000"
    },

    {
        "TrnId": 6558,
        "TrnDate": "2018-12-30T21:00:00.000Z",
        "SavingsMonth": "DECEMBER",
        "SavingsYear": "2018",
        "AccountName": "SANYA BRIAN",
        "SavingsAdded": "-",
        "SavingsRemoved": "45000.0",
        "SavingsRunningBalance": "205000.0"
    }
]
}

I have tried all possible ways but in vain

Oussama Assassi · Accepted Answer · 2019-05-03 08:22:17Z

1

Assuming that your json is stored in a variable $scope.data in your controller, the following code should work:

 <thead>
 <tr>
  <th ng-repeat="(header, value) in gridheader">{{value}}</th>
 </tr>
</thead>
<tbody>
 <tr ng-repeat="row  in data.rows">
  <td>{{row.TrnId}}</td>
  <td>{{row.TrnDate}}</td>
  <td>{{row.SavingsMonth}}</td>
  <td>{{row.SavingsYear}}</td>
  <td>{{row.AccountName}}</td>
  <td>{{row.SavingsAdded}}</td>
  <td>{{row.SavingsRemoved}}</td>
  <td>{{row.SavingsRunningBalance}}</td>
 </tr>
</tbody>

answered May 3, 2019 at 8:22

Oussama Assassi

1385 bronze badges

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

4 Comments

Googo Over a year ago

It seems obvious that it should really work but incidentally it is not work. I really don't know what am doing wrongly

Oussama Assassi Over a year ago

On your code you're doing an ng-repeat on data and not data.rows

Googo Over a year ago

<div>  <thead> <tr> <th ng-repeat="(header, value) in gridheader">{{value}}</th> </tr> </thead> <tbody> <tr ng-repeat="row in data.rows"> <td>{{row.TrnId}}</td> <td>{{row.TrnDate}}</td> <td>{{row.SavingsMonth}}</td> <td>{{row.SavingsYear}}</td> <td>{{row.AccountName}}</td> <td>{{row.SavingsAdded}}</td> <td>{{row.SavingsRemoved}}</td> <td>{{row.SavingsRunningBalance}}</td> </tr> </tbody> </div> Just like you edited

Googo Over a year ago

It's actually working, i had omitted the <table></table>, thanks so much

Collectives™ on Stack Overflow

Displaying JSON data in HTML table using angularjs ng-repeat directive

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related