In angularJS, How to refactor an $http call into a Service? - angularjs

Question

I tried to put the below code into a service but I seem to be missing something! I have to click the button twice to update the list shown in the table:
$scope.todoList = [];
$scope.showTodoList = function(){
var url = '/api/v1/todo/list/'+$scope.report.from+'/'+$scope.report.to;
$http({
method: 'GET',
url: url
}).then(function successCallback(response) {
$scope.todoList = response.data;
}, function errorCallback(response) {
console.log(response);
});
}
So I tried to do this:
angular.module('ReportController', []).controller('ReportController', ['$scope', '$http', '$rootScope', '$location', '$localStorage', '$routeParams', 'Report', 'Todo',
function ($scope, $http, $location, $localStorage, $routeParams, Report, Todo) {
$scope.todoList = [];
$scope.showTodoList = function(){
$scope.todoList = Report.getList($scope.report.from, $scope.report.to);
}
}]);
then i created a module and added the factory there and loaded this module with all others
angular.module('ReportService', []).factory('Report', ['$q', '$filter', '$http', '$timeout', function ($q, $filter, $http, $timeout) {
var list;
function getList(date_from, date_to){
var url = '/api/v1/todo/list/'+date_from+'/'+date_to;
$http({
method: 'GET',
url: url
}).then(function successCallback(response) {
list = response.data;
}, function errorCallback(response) {
console.log(response);
});
return list;
}
return {
getList: getList
};
}]);

Answer 1

Your problem seems to be that you are not waiting for the callback of $http call when returning the list.
You should make the ReportService's getList function to return a callback or a Promise. It will also change a bit how you need to handle the function call in your ReportController.
Example how to do this with callbacks:
ReportService:
angular.module('ReportService', []).factory('Report', ['$q', '$filter', '$http', '$timeout', function ($q, $filter, $http, $timeout) {
var list;
function getList(date_from, date_to, callback){
var url = '/api/v1/todo/list/'+date_from+'/'+date_to;
$http({
method: 'GET',
url: url
}).then(function successCallback(response) {
list = response.data;
return callback(list);
}, function errorCallback(response) {
console.log(response);
return callback(null);
});
}
return {
getList: getList
};
}]);
ReportController:
angular.module('ReportController', []).controller('ReportController', ['$scope', '$http', '$rootScope', '$location', '$localStorage', '$routeParams', 'Report', 'Todo',
function ($scope, $http, $location, $localStorage, $routeParams, Report, Todo) {
$scope.todoList = [];
$scope.showTodoList = function(){
Report.getList($scope.report.from, $scope.report.to, function(res){
if(res) {
$scope.todoList = res;
}
});
}
}]);