Yet Another Asynchronous service returns Undefined

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,
    };
}

})();