Выбрать и зациклить неизвестные объекты в AngularJS

0

Я довольно долго работал над генериками в ASP.NET MVC, и я думал о дженериках на других языках, особенно в AngularJS.

Предположим, у меня есть 2 конечных точки:

www.listofstudents.com/all и www.listofteachers.com/all

который вернет 2 типа объекта, либо students либо teachers.

Я хочу знать, как справиться с этим сценарием. Процесс будет:

  1. Извлечь из желаемой конечной точки.
  2. Определите тип объекта.
  3. Итерации через properties объекта для создания заголовков таблиц.
  4. Итерируйте значения и покажите их в таблице.

Вот что я пробовал до сих пор, просто типичный процесс запроса в угловом режиме и использование двух разных конечных точек:

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>
  • 0
    Напишите некоторый код и дайте нам знать, как это происходит.
  • 0
    Это код, который я написал до сих пор.
Показать ещё 2 комментария
Теги:
generics

1 ответ

2
Лучший ответ

Если вы все спрашиваете, как получить имена свойств для заголовков таблиц, должно быть достаточно чего-то вроде этого (при условии, что каждый пост имеет одинаковые ключи)

$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.

  • 0
    Спасибо за краткий ответ @Phil. Я боролся с этим несколько часов. Еще один вопрос, есть ли способ ограничить поля? Еще раз спасибо.
  • 0
    @ Кивал конечно. Вы можете использовать что-то вроде Array.prototype.filter в массиве headers чтобы отфильтровать нежелательные значения
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню