Search code examples
angularjsangularjs-scopeangularjs-serviceangularjs-controllerangularjs-controlleras

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


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();

});

Solution

  • 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();
    
    });