取和循环遍历AngularJS不明物体 [英] Fetch and loop over unknown objects in AngularJS

问题描述

我一直对仿制药在ASP.NET MVC相当长的一段时间，我想过上其他语言的泛型，特别是在AngularJS。

假设我有2个样本的端点：

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

这将返回2的对象类型，无论是学生或教师。

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

1. 从一个期望的终点取。


2. 确定对象类型。


3. 到对象的性能迭代创建表头。


4. 通过迭代值，并在表中显示出来。

下面是我到目前为止已经试过，只是角度和使用两个不同的端点典型的请求过程：

app.js

  VAR应用= angular.module（jsonApp，[]）;app.controller（jsonCtrl，['$范围，$ HTTP'，函数（$范围，$ HTTP）{
    $ http.get（HTTP：//jsonplaceholder.typi$c$c.com/comments）
        .success（功能（响应）{
            $ scope.records =响应;
        }）;    $ http.get（HTTP：//jsonplaceholder.typi$c$c.com/posts）
        .success（功能（响应）{
            $ scope.posts =响应;
        }）;    }]）;
 

的index.html

 ＆LT;表NG-控制器=jsonCtrl级=表＆GT;
        ＆所述; TR＆GT;
            ＆LT;第i的AuthorID＆LT; /第i
            ＆LT;第i个标题＆LT; /第i
            ＆LT;第i车身与LT; /第i
        ＆LT; / TR＆GT;
        ＆LT; TR NG重复=帖子在帖子| limitTo：10＆GT;
            ＆所述; TD＆GT; {{post.userId}}＆下; / TD＆GT;
            ＆所述; TD＆GT; {{post.title}}＆下; / TD＆GT;
            ＆所述; TD＆GT; {{post.body}}＆下; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; /表＆gt;
 




解决方案

如果你要问是如何获得在表头的属性名，这样的事情应该足够了（假设每个后的具有相同的键）

  $ http.get（HTTP：//jsonplaceholder.typi$c$c.com/posts）。然后（功能（响应）{
    $ 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-重复

 ＆LT;表＆gt;
＆LT;＆THEAD GT;
    ＆所述; TR＆GT;
        百分位NG重复=页眉标题＆GT; {{::头}}＆LT; /第i
    ＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
    ＆LT; TR NG重复= GT中的数据项＆;
        ＆LT; TD NG重复=托在头文件＆GT; {{::项目[道具]}}＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
 

嵌套的循环是维持成立于标题键顺序。

I've been working on generics in ASP.NET MVC for quite some time, and I've thought about generics on other languages, particularly in AngularJS.

Suppose I have 2 sample endpoints:

www.listofstudents.com/all and www.listofteachers.com/all

which will return 2 object type, either a students or teachers.

I want to know how to handle this scenario. The process will be:

1. Fetch from a desired endpoint.
2. Determine the object type.
3. Iterate through the properties of the object to create table headers.
4. Iterate through the values and display them in a table.

Here is what I have tried so far, just the typical request process in angular and using two different endpoints:

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>

解决方案

If all you're asking is how to get the property names for table headers, something like this should suffice (assuming each post has the same keys)

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

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

Then you can use 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>

The nested loop is to maintain the key order established in headers.

这篇关于取和循环遍历AngularJS不明物体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！