表示 Angular 中的 json 个未知维度数组

Question

假设我有一个这样的数组：

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

是否可以在不知道键数的情况下创建一个table？像这样：

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

Answer 1

你能得到另一种格式的答案吗？所以你没有 key.key1 或 key.key2。我会将 JSON 响应格式化如下：

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

无论如何，我会尽量避免在视图中使用自定义 json 字段，因为它们将来可能会发生变化。

Answer 2

试试下面的方法：

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

表示 Angular 中的 json 个未知维度数组

Representing json array of unknown dimensions in Angular

angularjs