CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-serviceangularjs-controllerangularjs-controlleras
ConfusedDeveloper
ConfusedDeveloper

Reputation: 7021

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

});

Upvotes: 1

Views: 603

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

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

});

Upvotes: 3

zeeshan Qurban
zeeshan Qurban

Reputation: 387

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

Upvotes: -1

Related Questions