Я довольно долго работал над генериками в 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>
Если вы все спрашиваете, как получить имена свойств для заголовков таблиц, должно быть достаточно чего-то вроде этого (при условии, что каждый пост имеет одинаковые ключи)
$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
.
Array.prototype.filter
в массиве headers
чтобы отфильтровать нежелательные значения