Fetch and loop over unknown objects in AngularJS

Question

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>

Answer 1

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.