Отображение данных JSON в таблице HTML с помощью директивы angularjs ng-repeat

Question

У меня проблемы с отображением следующих данных json в моей html-таблице с использованием угловой директивы js ng-repeat

<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>

Я выбираю эти данные Jsonот углового контроллера JS и возвращенного из объекта разрешения, как показано ниже.Это действительно заняло у меня вихрь бессонных ночей, чтобы расшифровать, но все напрасно Данные Джона:

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

Я перепробовал все возможные способы, но тщетно

Answer 1

Предполагая, что ваш json хранится в переменной $ scope.data вашего контроллера, следующий код должен работать:

 <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>