AngularJS - Data is not populating in table while using http service

Question

I have a Web API which retrieves list of employees. Now when I call to $http service, I can get data from WebApi but it neither populated in table nor gives any error.

Note: I am using angular v1.5.7

Below is the code I have written:

HTML

<body ng-app="employee" ng-controller="EmployeeController as emp">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="table-responsive">
                    <table class="table table=bordered table-hover">
                         <thead>
                            <tr>
                                <th>Name <input type="text" class="searchbar" placeholder="Fileter by Name" ng-model="search.FullName" /></th>
                                <th>Department <input type="text" class="searchbar" placeholder="Filter by Department" ng-model="search.Department"/></th>
                                <th>Designation <input type="text" class="searchbar" placeholder="Filter by Designation" ng-model="search.Designation"/></th>
                                <th>DOJ <input type="text" class="searchbar" placeholder="Filter by DOJ" ng-model="search.Doj" /></th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="e in emp.AllEmployees | filter:search:strict">
                                <td>{{e.FullName}}</td>
                                <td>{{e.Department}}</td>
                                <td>{{e.Designation}}</td>
                                <td>{{e.Doj}}</td>
                                <td><a ng-click="emp.RetrieveDetails(e.Id)">Edit</a>&nbsp;<a ng-click="emp.Delete(e.Id)">Delete</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

JS

'use strict';

var apiUrl = 'http://localhost:56997/api/';
var app = angular.module('employee', []);

app.service('ngEmployeeService', function($http){

    this.getEmployees = function()
    {
        var res = $http.get(apiUrl + 'employee/all');
        return res;
    }

});

app.controller('EmployeeController', function($scope, ngEmployeeService){

    this.selectedEmployee = {};

    function LoadEmployees()
    {
        var promise = ngEmployeeService.getEmployees();
        promise.then(function(resp){
            $scope.AllEmployees = resp.data;
        }, function(err){
            alert('Call Failed');
        });
    };

    LoadEmployees();

});

Pankaj Parkar · Accepted Answer · 2016-07-02T07:40:55.753

Inside your controller you should bind data to controller context this as you are using controllerAs syntax while using controller on HTML. Ideally when you are using controllerAs you shouldn't be mixing $scope dependency in controller. Do remove $scope dependency and use self(this) wherever you want to use that variable on view for binding.

Code

app.controller('EmployeeController', function($scope, ngEmployeeService){
    var self = this;
    self.selectedEmployee = {};

    function LoadEmployees()
    {
        var promise = ngEmployeeService.getEmployees();
        promise.then(function(resp){
            self.AllEmployees = resp.data;
        }, function(err){
            alert('Call Failed');
        });
    };
    LoadEmployees();

});

score -1 · Answer 2 · answered Jul 02 '16 at 07:37

-1

You should change your code to this.

app.service('ngEmployeeService', function($http){

this.getEmployees = function()
{
        var res;
 $http.get(apiUrl + 'employee/all')
   .success(function (response) {
    res = response;});
}
});

answered Jul 02 '16 at 07:37

zeeshan Qurban

387
1
3
15

it would not return a data as you have used callback's over here, Ideally it should return a promise like OP already doing that – Pankaj Parkar Jul 02 '16 at 07:42

AngularJS - Data is not populating in table while using http service

2 Answers2