Wait for $http.get to finish when the service is called - angularjs

Question

I am facing a problem where the controller calls the service function getMyList but myLists is not populated yet as $http call takes some time to complete.
How do I resolve this problem?
Here is my code snippet:
Service
app.factory('myService', function($http) {
var myList = [];
$http.get("http://myService/json.data").then(function (resp) {
myLists = resp.data;
});
return {
getMyList: function (name) {
for (var i = 0; i < myLists.length; i++) {
if (myList[i].name == name) {
return myLists[i];
}
}
}
}
}
Controller:
app.controller('MainCtrl', function( myService,$scope) {
var testName = "test"
myService.getMyList(testName).then(function(resp) {
// do something with resp data
});
});

Answer 1

You first need to fix the typos, and choose a better naming. Then you need to return a promise of element rather than an element (that's what the controller expects, by the way):
app.factory('myService', function($http) {
// this defines a promise which, when resolved, contains an array of elements
var listPromise = $http.get("http://myService/json.data").then(function(resp) {
return resp.data;
});
return {
// this returns a promise which, when resolved, contains the element with the given name
getElementFromList: function(name) {
return listPromise.then(function(list) {
return list.filter(function(element) {
return element.name === name;
})[0];
});
}
};
});

Answer 2

Every HTTP call returns a promise in angular, so in your service just return the HTTP call and it return a promise.
Then in your controller you can use then and error call back to handle the response from the service or api call.
Factory:
app.factory('myService', function($http) {
var myList = [];
return {
getMyList: function (name) {
$http.get("http://myService/json.data")
}
}
}
Controller:
app.controller('MainCtrl', function( myService,$scope) {
var testName = "test"
myService.getMyList()
.then(function successCallback(resp) // Success call back
{
if(resp.data)
{
myLists = resp.data;
for (var i = 0; i < myLists.length; i++) {
if (myList[i].name == testName) { // you can use your testName here itself.
return myLists[i];
}
}
}
},
function errorCallback(resp) // Error call back
{
console.log(resp)
});
});

Answer 3

If you are using some client-side router implementation: have a look at Route.Resolve that both Ui.Router and ngRoute implement.
If you don't have any router, then, there is a little trick that you can do... Simply return a object reference from your factory, and, when the resolution occurs, fill that object with the expected value:
angular
.module('test', [])
.constant('API', 'https://jsonplaceholder.typicode.com')
.factory("PostResolved", function($http, API) {
var result = [];
$http
.get(API + '/posts/1')
.then(function(response) {
result.push(response.data);
})
;
return result;
})
.controller('TestCtrl', function($scope, PostResolved) {
$scope.posts = PostResolved;
})
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
<article ng-controller="TestCtrl">
<div ng-repeat="post in posts">
<h1 ng-bind="post.title"></h1>
</div>
</article>
</section>

Answer 4

Why don't use something like below:
app.factory('myService', function($http) {
return {
getMyList: function (name) {
var myList = [];
$http.get("http://myService/json.data").then(function (resp) {
myLists = resp.data;
});
scope.$evalAsync(function () {
for (var i = 0; i < myLists.length; i++) {
if (myList[i].name == name) {
return myLists[i];
}
}
});
}
}
}

Answer 5

I managed to solve this by using $timeout. Anybody who has a better suggestion let me know. I couldn't get scope.$evalAsync to work
Service
app.factory('myService', function($http, $timeout) {
var lists = [];
$http.get("http://myService/json.data").then(function (resp) {
lists = resp.data;
});
return {
getMyList: function (name) {
return $timeout(function() {
for (var i = 0; i < lists.length; i++) {
if (lists[i].name == name) {
return lists[i];
}
}
}, 2000)
}
}
controller
app.controller('MainCtrl', function( myService,$scope) {
var testName = "test"
myService.getMyList(testName).then(function(resp) {
// do something with resp data
});
});