Doro Doro - 2 months ago 7
AngularJS Question

Can't use returned data from AngularJS Factory

I try to show some information in a table using http request.

For that I create a factory and I am calling that factory inside a controller. When I verify (with FireBug) if '$scope.showSal' have data, it tell me that it exists an array with 4 elements (totally good).

The problem is that doesn't show on screen any data.

With simple assignment like $scope.showSal = [{...}] it works, but when I use a factory it doesn't work.

May someone help me to use the received data from factory?

PS: For testing I am using a specific array to return and not returning the response.data (but even I return response.data it have the same behavior)

var app = angular.module("salariesApp", ['ui.bootstrap']);

app.factory('salServ', ['$http', function ($http) {
var showSal = {};

showSal.getItems = function () {
return $http.get('http://localhost:8080/TT2/GetSalariesDetails')
.then(
function (response) {
alert("OK");
return [{ id: '1', an: '2016', den: 'Oracle Romania' },
{ id: '2', an: '2016', den: 'Microsoft' },
{ id: '3', an: '2016', den: 'Computer Generated Solutions - CGS Europe' },
{ id: '4', an: '2016', den: 'IBM' }];
},
function (response) {
alert("NO");
}
);
};
return showSal;
}]);

app.controller('mainCtrl', ['$scope', 'salServ', function($scope, salServ) {
$scope.showSal = salServ.getItems();
console.log($scope.showSal);

$scope.showItems = $scope.showSal;
}]);


HTML code is here:

<!DOCTYPE html>
<html>

<head>
<title>Research project</title>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js" data-semver="3.0.0" data-require="jquery@*"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js" data-semver="1.5.7" data-require="angularjs@1.5.7"></script>
<script data-require="ui-bootstrap-tpls-0.12.0.min.js@*" data-semver="0.12.1" src="https://raw.githubusercontent.com/angular-ui/bootstrap-bower/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="test.js"></script>
</head>

<body ng-controller="mainCtrl" ng-app="salariesApp">
<table class="table">
<thead>
<tr>
<th ng-click="sortBy(id)">Nr. crt.</th>
<th ng-click="sortBy(an)">Anul</th>
<th ng-click="sortBy('den')">Denumirea institutiei/companiei</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableSearch"></td>
<td class="tableSearch">
<input type="text" ng-value="{{crrYear}}" ng-model="searchSal.an" id="inputYear" class="form-control" />
</td>
<td class="tableSearch">
<input type="text" ng-model="searchSal.den" id="inputName" class="form-control" />
</td>
</tr>
<tr ng-repeat="rows in showItems">
<td class="spa-col-md-1">{{rows.id}}</td>
<td class="spa-col-md-2">{{rows.an}}</td>
<td class="col-md-5">{{rows.den}}</td>
</tr>
</tbody>
</table>
</body>

</html>

Answer

$http.get() is asynchronous and returns a Promise. The HTTP call is certainly not completed when you try to set $scope.showItems value.

Try

var app = angular.module("salariesApp", ['ui.bootstrap']);

app.factory('salServ', ['$http', function ($http) {
    var showSal = {};

    showSal.getItems = function (callBack) {
        return $http.get('http://localhost:8080/TT2/GetSalariesDetails')
                .then(
                callBack (response.data),
                function (response) {
                    alert("NO");
                }
              );
    };
    return showSal;
}]);

app.controller('mainCtrl', ['$scope', 'salServ', function ($scope, salServ) {
    salServ.getItems(
        function (data) {
            $scope.showItems = data;
            console.log($scope.showItems);//or $log...
        }
    );
}]);