CODEWITHSUNDEEP
javascriptjsonangularjshtml
Googo
Googo

Reputation: 79

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

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

Upvotes: 0

Views: 394

Answers (1)

Oussama Assassi
Oussama Assassi

Reputation: 138

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>

Upvotes: 1

Related Questions