Bind Dynamic Columns To A Table Using Angularjs

I am getting some data from an external service and I am trying to show it on a table. The problem is that the data I get from service will be with dynamic columns, some times ther

Solution 1:

Will there be the same number of columns for all data items? If so, I think you can do this.

1. Define a function on your scope that gives you the object keys:

$scope.keys = function(obj) {
    var key;
    var keys = [];
    for (key in obj) {
        if (key === "$$hashKey") break; //angular adds new keys to the object
        if (obj.hasOwnProperty(key)) keys.push(key);
    }
    return keys;
  }

2. use a repeater on the table header (if the objects can have different properties, you need to find the object with the highest number of properties/columns)

<th ng-repeat="key in keys( prdElement.Data[0] )">{{key}}</th>

3. use a repeater on the table cell

<td ng-repeat="key in keys( prdElement.Data[0] )">{{ data[key] }}</td>