Question

我一直在从事ASP.NET MVC中的泛型工作已经有一段时间了，我已经考虑过其他语言的泛型，特别是在AngularJS中。

假设我有2个样本端点：

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

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

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

从所需端点获取。
确定对象类型。
遍历对象的properties以创建表格标题。
遍历这些值并将其显示在表格中。

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

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中建立的密钥顺序。

获取并循环AngularJS中的未知对象

1 个答案: