Iterating a list present in an object in angular ng-repeat

Question

I have a controller defined as follows with the method getEmployeeDetails:

var app = angular.module('app');
app.controller('AppController',[ '$scope', '$http', function($scope, $http) {

    $scope.result = [];
    $scope.getEmployeeDetails = function() {
        var response = $http.get('http://localhost:8080/empMgt/employee/all');
        response.success(function(data, status, headers, config) {
            $scope.result.push(data);
        });
        response.error(function(data, status, headers, config) {
            alert( "Exception details: " + JSON.stringify({data: data}));
        });
    };

    $scope.getEmployeeDetails();
}]);

This method gets a result object in return that has a list of employees in it. I am trying to show that list in a table in my html.

The html is as follows:

<body ng-controller="AppController" style="display:none">
    {{result}}
    <table>
        <tr>
            <th>EmployeeId</th>
            <th>ProjectId</th>
            <th>Employee Name</th>
            <th>Employee Address</th>
        </tr>
        <tr ng-repeat="employee in result.listOfEntities">
            <td>{{employee.employeeId}}</td>
            <td>{{employee.projectId}}</td>
            <td>{{employee.employeeName}}</td>
            <td>{{employee.employeeAddress}}</td>
        </tr>
    </table>
</body>

The object comes fine in the html as i printed the same. The list is not getting iterated in the table row.

The returned data looks like this:

{
    "result": true,
    "resultCode": "SUCCESS",
    "listOfEntities": [{
        "employeeId": "1",
        "projectId": "1",
        "employeeName": "asdfg",
        "employeeAddress": "asdfg",
        "project": null
    }]
}

Help would be appreciated.

Could you output what data variable contains ? Are you sure that listOfEntities it's in data object ? — Andrei Todorut
– Andrei Todorut, Commented Apr 20, 2017 at 13:31

Buh Buh · Accepted Answer · 2017-04-20 13:41:35Z

2

result.listOfEntities does not exist, beacause result is clearly an array:

$scope.result = [];
$scope.result.push(data);

I imagine you would be better off without the array, and instead:

$scope.result = data;

or even:

$scope.listOfEntities = data.listOfEntities;
ng-repeat="employee in listOfEntities"

answered Apr 20, 2017 at 13:41

Buh Buh

7,5262 gold badges38 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prerak Sola · Accepted Answer · 2017-04-20 13:43:06Z

1

You have declared $scope.result as an array($scope.result=[]). So result.listOfEntites will not resolve to anything. As per your sample data, it should be an object ($scope.result={};) and in the response from your server, you should do $scope.result = data

answered Apr 20, 2017 at 13:43

Prerak Sola

10.1k8 gold badges39 silver badges77 bronze badges

Comments

Manikandan Velayutham · Accepted Answer · 2017-04-20 13:46:22Z

Why you are use push.. We don't need to push, We can use directly.

var app = angular.module('app',[]);
app.controller('AppController', [ '$scope', '$http', function($scope, $http) {
            $scope.result = [];
$scope.getEmployeeDetails = function() {            
  var data = {
    "result": true,
    "resultCode": "SUCCESS",
    "listOfEntities": [{
        "employeeId": "1",
        "projectId": "1",
        "employeeName": "asdfg",
        "employeeAddress": "asdfg",
        "project": null
    }]
  };
  $scope.result.push(data.listOfEntities[0]);
};
$scope.getEmployeeDetails();
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="app" ng-controller="AppController">
    <div class="wrapper row-offcanvas row-offcanvas-left">
        <!-- Main content -->
        <div class="program-section">
            {{result.listOfEntities}}
            <div class="container">
                <table class="table-striped">
                    <tr>
                        <th>EmployeeId</th>
                        <th>ProjectId</th>
                        <th>Employee Name</th>
                        <th>Employee Address</th>
                    </tr>
                    <tr ng-repeat="employee in result">{{employee}}
                        <td>{{employee.employeeId}}</td>
                        <td>{{employee.projectId}}</td>
                        <td>{{employee.employeeName}}</td>
                        <td>{{employee.employeeAddress}}</td>
                    </tr>
                </table>

            </div>
        </div>
        <!-- ./program-section -->
    </div>
    <!-- ./wrapper -->
</body>

Collectives™ on Stack Overflow

Iterating a list present in an object in angular ng-repeat

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related