AngularJS - таблица из динамически сгенерированного JSON с различными именами ключей

Question

Я пытаюсь создать таблицу из динамически генерируемых JSON.Например, JSON может выглядеть так:

[{"date": "10-10-2010", "Cost":"10", "Column3": 20} ...]

Но также может выглядеть так:

[{"date": "10-10-2010", "Column1":"ex", "Column2": 1, "Column4": "text"} ...]

Я хочу, чтобы заголовки столбцов были именами ключей JSON, а строки -ячейки должны быть значениями этих ключей.Есть ли простой способ добиться этого?

Answer 1

Вам нужен массив с ключами.Допустим, у нас есть функция, которая возвращает ключи:

$scope.getKeys = function(obj) {
  return Object.getOwnPropertyNames(obj).slice(0, -1)
}

Теперь, предполагая, что в вашем массиве динамически генерируемых JSON (назовем это data) все объекты имеют одинаковые ключи (столбцы), вы можете отобразить таблицуследующим образом:

<table>
  <thead>
    <tr>
      <th ng-repeat="key in getKeys(data[0])">
        {{key}}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in data">
      <td ng-repeat="col in getKeys(data[0])">{{row[col]}}</td>
    </tr>
  </tbody>
</table>

См. рабочий фрагмент с примером data1 и data2 ниже.

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.data1 = [{
      "date": "10-10-2010",
      "Column1": "ex",
      "Column2": 1,
      "Column4": "text"
    },
    {
      "date": "11-11-2011",
      "Column1": "ex",
      "Column2": 2,
      "Column4": "text"
    }
  ];

  $scope.data2 = [{
      "date": "10-10-2010",
      "Cost": "10",
      "Column3": 20
    },
    {
      "date": "10-10-2011",
      "Cost": "11",
      "Column3": 30
    }
  ]

  $scope.getKeys = function(obj) {
    return Object.getOwnPropertyNames(obj).slice(0, -1)
  }
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">

  <h4>For data1:</h4>
  <table>
    <thead>
      <tr>
        <th ng-repeat="key in getKeys(data1[0])">
          {{key}}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in data1">
        <td ng-repeat="col in getKeys(data1[0])">{{row[col]}}</td>
      </tr>
    </tbody>
  </table>

  <h4>For data2:</h4>
  <table>
    <thead>
      <tr>
        <th ng-repeat="key in getKeys(data2[0])">
          {{key}}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in data2">
        <td ng-repeat="col in getKeys(data2[0])">{{row[col]}}</td>
      </tr>
    </tbody>
  </table>

</div>

Answer 2

Для заголовка вам нужно получить первую строку данных json, например:

<thead>
   <tr>
     <th ng-repeat="(header, value) in jsonData[0]">
       {{header}}
     </th>
    </tr>
</thead>

После этого вы должны выполнить итерацию tbody следующим образом:

 <tbody>
    <tr ng-repeat="rowData in jsonData">
      <td ng-repeat="cellData in rowData">
        {{cellData}}
      </td>
    </tr>
 </tbody>

Это самый простой способ связать динамическиеHTML таблица.

Надеюсь, это сработает для вас!