use $http.get in a service/factory to return a collection
Solution 1
Basically you could modified the data inside the ajax success call & then return that data from the success. But for returning data from ajax success you need to use promise pattern to return out data from $http.get
. you need to return the object from the $http.get
promise, & inside .then
function of $http.get
you could manipulate data.
Factory
app.factory('customer', ['$http', function($http) {
var all, odds = [];
var getData = function() {
return $http.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
all = response.records;
angular.forEach(all, function(c, i) {
if (i % 2 == 1) {
odds.push(c);
}
});
return odds
});
}
return {
getData: getData
};
}]);
Controller
app.controller('customersCtrl', ['$scope','customer',function($scope, customer) {
customer.getData().then(function(response){
$scope.odds = response;
});
}]);
Solution 2
I took the liberty to modify your code to return a promise from the factory, so you can set the value as soon as the promise is resolved.
var app = angular.module('myApp', []);
app.controller('customersCtrl', ['$scope','customer',function($scope, customer) {
customer.then(function(data){
$scope.odds = data.odds;
customer.then(function(data){
console.log(data);
});
});
}]);
app.factory('customer', ['$http', function($http) {
var all = [{'Id':88, 'Name':"A"}, {'Id':89, 'Name':"ShoutNotBeHere"}];
var odds = [];
return $http.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
all = response.data.records;
angular.forEach(all, function(c, i) {
if (i % 2 == 1) {
c.Id = i;
odds.push(c);
}
});
return {odds: odds};
});
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
Odd ids from www.w3schools.com/angular/customers.php
<ul>
<li ng-repeat="c in odds">
{{ c.Id + ', ' + c.Name }}
</li>
</ul>
</div>
</body>
Comments
-
serge almost 2 years
I try to use a
http.get
promise in an angularjs service, do some manipulation on the obtained collection and finally return it to a controller...My question is how to use a
$http.get()
in a service in order to obtain and manipulate the result before returning it to the controller, like in the code bellow : The PEN codevar app = angular.module('myApp', []); app.controller('customersCtrl', ['$scope','customer',function($scope, customer) { $scope.odds = customer.odds; }]); app.factory('customer', ['$http', function($http) { var all = [{'Id':88, 'Name':"A"}, {'Id':89, 'Name':"ShoutNotBeHere"}]; var odds = []; $http.get("http://www.w3schools.com/angular/customers.php") .then(function(response) { all = response.records; }); angular.forEach(all, function(c, i) { if (i % 2 == 1) { odds.push(c); } }); return {odds: odds}; }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="customersCtrl"> Odd ids from www.w3schools.com/angular/customers.php <ul> <li ng-repeat="c in odds"> {{ c.Id + ', ' + c.Name }} </li> </ul> </div> </body>