angularjs ng-repeat with dynamic json / object

I am looking a solution for dynamic data structure(inconsistent like different property name and property length) with ng-repeat. sample code are below.

我正在寻找一个动态数据结构的解决方案（与不同的属性名称和属性长度不一致）与ng-repeat。示例代码如下。

    $scope.data = [{
        "table":[{
        "employee":"name1",
        "value1":"10",
        "value2":"20"
        },
        {
        "employee":"name2",
        "value1":"15",
        "value2":"30"
        }]
    },
    {
        "table":[{
        "company":"name1",
        "compnayValue":"12"
        },
        {
        "company":"name2",
        "compnayValue":"12"
        }]
    }]

    <ul>
        <li ng-repeat="item in data">
            <table>
                <tr ng-repeat="row in item.table">
                    <td>{{??}}</td>
                    <td>{{??}}</td>
                </tr>
            </table>
        </li>
    </ul>

3 个解决方案

#1

You could enumerate all properties and display their values by another ng-repeat on td:

您可以枚举所有属性并通过td上的另一个ng-repeat显示其值：

<li ng-repeat="item in data">
  <table>
    <tr ng-repeat="row in item.table">
      <td ng-repeat="(key, value) in row">
        {{row[key]}}
      </td>
    </tr>
  </table>
</li>

but that would break the tabular format of data since some rows would have more tds. To prevent that you could first find out the set of all keys on all rows, do a th repeat with those first and then display them on the corresponding td below, e.g.:

但这会打破数据的表格格式，因为有些行会有更多的tds。为了防止你首先找到所有行的所有键的集合，先用这些键重复，然后在下面相应的td上显示它们，例如：

<th ng-repeat="propertyName in allPossiblePropertyNames">
  {{propertyName}}
</th>

and

和

<td ng-repeat="propertyName in allPossiblePropertyNames">
  {{row[propertyName ]}}
</td>

#2

Use <tbody> to represent an object inside table array and (key,value) syntax mentioned in iterating over object properties section to iterate over it's properties like:

使用表示表数组中的对象和迭代对象属性部分中提到的（键，值）语法，以迭代它的属性，如：

angular.module('test', []).controller('testCtrl', function($scope) {
  $scope.data = [{
    "table": [{
      "employee": "name1",
      "value1": "10",
      "value2": "20"
    }, {
      "employee": "name2",
      "value1": "15",
      "value2": "30"
    }]
  }, {
    "table": [{
      "company": "name1",
      "compnayValue": "12"
    }, {
      "company": "name2",
      "compnayValue": "12"
    }]
  }]
});

ul {
  padding: 0;
}
ul li {
  list-style-type: none;
  margin-bottom: 10px;
}
table {
  width: 100%;
  table-layout: fixed;
  background: #ebebeb;
}
tbody:nth-child(odd) tr {
  color: #fff;
  background: dodgerblue;
}
tbody:nth-child(even) tr {
  color: #fff;
  background: hotpink;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
  <ul>
    <li ng-repeat="item in data">
      <table>
        <tbody ng-repeat="row in item.table">
          <tr ng-repeat="(key, value) in row">
            <td>
              {{key}}
            </td>
            <td>
              {{value}}
            </td>
          </tr>
        </tbody>
      </table>
    </li>
  </ul>
</div>

#3

Check this plunker, you can define template depends on your data : https://plnkr.co/edit/fVGhKZy5gnBzuPwspy5s?p=preview

检查这个plunker，你可以定义模板取决于你的数据：https：//plnkr.co/edit/fVGhKZy5gnBzuPwspy5s?p=preview

Use angular filter :

使用角度过滤器：

app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = [{
      "table":[{
      "employee":"name1",
      "value1":"10",
      "value2":"20"
      },
      {
      "employee":"name2",
      "value1":"15",
      "value2":"30"
      }]
  },
  {
      "table":[{
      "company":"name1",
      "compnayValue":"12"
      },
    {
    "company":"name2",
    "compnayValue":"12"
    }]
  }]
 })
  .filter('isCompnay', function() {
   return function(input) {
   console.log(input.employee === undefined)
   return input.company ? input : undefined;
  };
})
.filter('isEmployee', function() {
return function(input) {
  console.log(input.employee === undefined)
  return input.employee ? input : undefined;
   };
 });

#1