Yet Another Asynchronous service returns Undefined - angularjs

Question

This is my service:
(function () {
'use strict';
angular
.module('app')
.service('ClientsService', Service);
function Service($http) {
function getClients() {
$http.get('app/client/clients.json')
.then(function(res){
return res.data;
});
}
return {
getClients: getClients,
};
}
})();
If I a console log inside then I can obtain the clients from the json file.
Then I want to use the service in my component:
(function () {
'use strict';
var module = angular.module('app');
module.component("client", {
templateUrl: "app/client/client.html",
controllerAs: "model",
controller: function (ClientsService) {
var model = this;
model.clients = ClientsService.getClients();
console.log(model.clients)
}
});
})();
But the log says me: undefined.
How can I fix it?

Answer 1

You'll need minor refactoring for this to work.
(function () {
'use strict';
angular
.module('app')
.service('ClientsService', Service);
function Service($http) {
function getClients() {
//Notice the return here? we're returning a promise.
return $http.get('app/client/clients.json')
.then(function(res){
return res.data;
});
}
return {
getClients: getClients,
};
}
})();
(function () {
'use strict';
var module = angular.module('app');
module.component("client", {
templateUrl: "app/client/client.html",
controllerAs: "model",
controller: function (ClientsService) {
var model = this;
//getClients() now returns a promise that is resolved
//when the client list is loaded
ClientsService.getClients().then(function(clients){
model.clients = clients;
console.log(model.clients);
});
}
});
})();

Answer 2

It is because, the http request has not been completed. You will have data only after completion of http request. You can try following code. Also return http promise from the service.
module.component("client", {
templateUrl: "app/client/client.html",
controllerAs: "model",
controller: function (ClientsService) {
var model = this;
ClientsService.getClients().then(function(clients){
model.clients = clients;
console.log(model.clients)
})
}
});
Change Service like this:
(function () {
'use strict';
angular
.module('app')
.service('ClientsService', Service);
function Service($http) {
function getClients() {
return $http.get('app/client/clients.json')
.then(function(res){
return res.data;
});
}
return {
getClients: getClients,
};
}
})();