Dynamic table creation with ng-repeat in angularjs

Question

I want to generate dynamic table with dynamic table header and row/columns according to json object comes from webapi.

Here are examples of json object whic

Answer 1

The logic is to get the header by iterating on the first object props using Object.keys.

To get only the values from to the cells itself you can do ng-repeat with (key, value) in some_obj.

Here is a full example:

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.data1 = [
    {"Country":"Australia","Toner Quantity":8},
    {"Country":"China","Toner Quantity":6},
    {"Country":"India","Toner Quantity":11},
    {"Country":"South Korea","Toner Quantity":1}
  ];

  $scope.data2 = [
    {"CustomerName":"FORD","Australia":0,"China":2,"India":0,"South Korea":0},
    {"CustomerName":"ICICI PRUDENTIAL","Australia":0,"China":0,"India":5,"South Korea":0},
    {"CustomerName":"Kimberly Clark","Australia":0,"China":0,"India":0,"South Korea":1},
    {"CustomerName":"McDonalds","Australia":1,"China":0,"India":0,"South Korea":0},
    {"CustomerName":"Novartis","Australia":1,"China":0,"India":0,"South Korea":0},
    {"CustomerName":"Origin Energy","Australia":3,"China":0,"India":0,"South Korea":0}
  ];

  $scope.getHeaders = function(arr) {
    return Object.keys(arr[0]);
  };
});

  

    

      
{{header}}
    
    

      
{{value}}
    
  
  

  

    

      
{{header}}
    
    

      
{{value}}