javascript - 获取并循环遍历 AngularJS 中的未知对象

Question

我在 ASP.NET MVC 中研究泛型已经有一段时间了，我也考虑过其他语言的泛型，尤其是 AngularJS。

假设我有 2 个示例端点:

www.listofstudents.com/all和www.listofteachers.com/all

这将返回 2 个对象类型，students 或 teachers。

我想知道如何处理这种情况。该过程将是:

1. 从所需端点获取。
2. 确定对象类型。
3. 遍历对象的属性以创建表头。
4. 遍历这些值并将它们显示在表格中。

这是我到目前为止尝试过的，只是典型的 Angular 请求过程并使用两个不同的端点:

app.js

var app = angular.module("jsonApp",[]);

app.controller("jsonCtrl", ['$scope', '$http',function($scope, $http){
    $http.get("http://jsonplaceholder.typicode.com/comments")
        .success(function(response){
            $scope.records = response;
        });

    $http.get("http://jsonplaceholder.typicode.com/posts")
        .success(function(response){
            $scope.posts = response;
        });

    }]);

index.html

<table ng-controller="jsonCtrl" class="table">
        <tr>
            <th>AuthorID</th>
            <th>Title</th>
            <th>Body</th>
        </tr>
        <tr ng-repeat="post in posts | limitTo: 10">
            <td>{{post.userId}}</td>
            <td>{{post.title}}</td>
            <td>{{post.body}}</td>
        </tr>
    </table>

Answer 1

如果您要问的只是如何获取表头的属性名称，那么这样的事情就足够了(假设每个post 具有相同的键)

$http.get("http://jsonplaceholder.typicode.com/posts").then(function(response) {
    $scope.data = response.data;
    $scope.headers = Object.keys(response.data[0] || {});
});

参见 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

然后就可以使用ng-repeat

<table>
<thead>
    <tr>
        <th ng-repeat="header in headers">{{::header}}</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="item in data">
        <td ng-repeat="prop in headers">{{::item[prop]}}</td>
    </tr>
</tbody>
</table>

嵌套循环是为了维护在headers中建立的键顺序。