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.

• svarog: you get your response data and you place it in "$scope.data" and that is where it always stays
• vinayakj: change <tr ng-repeat="ds in data"> to <tr ng-repeat="d in data">, seems to be typo

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