代表角

Question

未知維度的JSON數組比方說，我有一個這樣的數組：

[ 
    { 
     "key1": "value1", 
     "key2": "value2", 
     "key3": "value3", 
     "key4": "value4", 
    }, 
    { 
     "key1": "value5", 
     "key2": "value6", 
     "key3": "value7", 
     "key4": "value8", 
    } 
] 

是否有可能創建一個表不知道密鑰的數量？類似這樣的：

<table> 
    <thead> 
     <tr> 
      <th ng-repeat="key in keys"> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td ng-repeat="value in values"> 
     </tr> 
    </tbody> 
</table> 

Answer 1

如下嘗試：

HTML

<table> 
    <thead> 
     <tr> 
      <th ng-repeat="col in keyObj">{{col}}</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="key in keys"> 
      <td ng-repeat="col in key"> {{col}} </td> 
     </tr> 
    </tbody> 
</table> 

控制器：

app.controller('MainCtrl', function($scope) { 
    $scope.keys = [ 
    { 
     "key1": "value1", 
     "key2": "value2", 
     "key3": "value3", 
     "key4": "value4", 
    }, 
    { 
     "key1": "value5", 
     "key2": "value6", 
     "key3": "value7", 
     "key4": "value8", 
    }]; 

    $scope.keyObj = Object.keys($scope.keys[0]); 
}); 

工作樣本here

Answer 2

你能否以其他方式得到答案格式？所以你沒有key.key1或key.key2。我會格式化JSON迴應如下：

[ 
    keys:[ 
     1:"key1", 
     2:"key2", 
     3:"key3", 
     4:"key4" 
    ], 
    values: [ 
    1: [ 
      "value5", 
      "value6", 
      "value7", 
      "value8" 
     ], 
    2: [ 
      "", "", "", "" 
     ] 
    ] 
] 

無論如何，我會盡量避免在視圖中的自定義字段的JSON，因爲他們可能會在未來改變。