Dynamic Table in Angular JS from json

Question

I am trying to generate a dynamic table from Angular JS by receiving a response from Spring Rest Service.

This is my code:

 // JavaScript Document var app = angular.module("SDLC", []); app.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.useXDomain = true; $httpProvider.defaults.headers.common = 'Content-Type: application/json'; delete $httpProvider.defaults.headers.common['X-Requested-With']; }]); var urlBase = "http://localhost:8080"; app.controller('projecttable_controller', function($scope, $http) { $scope.ordered_columns = []; $scope.all_columns = [{ "title": "Project Name", "type": "string" }, { "title": "Project Description", "type": "string" }, { "title": "Owner", "type": "string" }, { "title": "Start Date", "type": "string" }, { "title": "End Date", "type": "string" },{ "title": "Record ID", "type": "string" }]; $http.get(urlBase+'/hello?input=raina'). success(function(data) { //alert(data); $scope.data=data; alert($scope.data); }); $scope.$watch('all_columns', function() { update_columns(); }, true); var update_columns = function() { $scope.ordered_columns = []; for (var i = 0; i < $scope.all_columns.length; i++) { var column = $scope.all_columns[i]; $scope.ordered_columns.push(column); } }; }); 

 <div class="btn-box-row row-fluid"> <table class="table table-striped"> <thead> <tr> <th ng-repeat="c in ordered_columns">{{ c.title }} </th> </tr> </thead> <tbody> <tr ng-repeat="ds in data"> <td ng-repeat="c in ordered_columns">{{ d[c.title] }}</td> </tr> </tbody> </table> </div> 

There are no errors in the console. The table headers are displayed correctly. However, the data does not get populated in the table. If I hardcode the json in $scope.data, the table gets populated properly. Any help would be appreciated.

Answer 1

When you fetch your GET response, you write $scope.data = data; and you do nothing with $scope.data

change:

 $http.get(urlBase+'/hello?input=raina').
     success(function(data) {
        //alert(data);  
        $scope.data=data; 
        alert($scope.data);
     });

to:

 $http.get(urlBase+'/hello?input=raina').
     success(function(data) {
        //alert(data);  
        $scope.all_columns=data; 
        alert($scope.data);
     });

Because I see you populate your table from $scope.all_columns