My Service is returning data to the controller but I cannot seem to access it like I would expect.

Question

(function () {
angular.module("app").controller('DashboardController', ['$q', 'dashboardService', function ($scope, $q,dashboardService) {
    var DashboardController = this;
    dashboardService.loadFromServer(DashboardController );
    console.log("DashboardController ", DashboardController);
}])
})();


angular.module("app").service('dashboardService', ['$http', '$q', function ($http, $q) {
return {
    loadFromServer: function (controller) {
        var getDashboardEntries = $http.get('http://someUrl');
        var getEmailData = $http.get('http://someOtherUrl');
        var getSidebarData = $http.get('http://yetAnotherUrl');

        return $q.all([getDashboardEntries, getSidebarData, getEmailData])
          .then(function (results) {
              controller.dashboardData = results[0].data;
              controller.chartData = results[1].data;
              controller.emailData = results[2].data;
          });
    },
};
}]);

1.The service returns the three bits of data and this is the results when logged using:

console.log("DashboardController ", DashboardController);

When I try to drill down on the data in this manner it logs "undefined"

console.log("DashboardController "DashboardController.dashboardData); console.log("DashboardController "DashboardController.chartData); console.log("DashboardController "DashboardController.emailData);

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Tamas Hegedus, Oct 14 '16 at 22:25

Keammoort · Accepted Answer · 2016-10-14T22:25:12.307

Do you realize that console.log is executed right after invoking loadFromServer before the server has chance to respond and promise resolves? The actual order is:

loadFromServer
console.log
promise success method - where you actually have your data

Change your controller's code to this:

dashboardService.loadFromServer(DashboardController ).then(function() {
    console.log("DashboardController ", DashboardController);
});

What would be even better is to construct some object from parts of responses and assign it in the controller itself - not the service. In current implementation if you wanted to have another controller then service would assign response parts to same fields. I'd propose sth like this:

return $q.all([getDashboardEntries, getSidebarData, getEmailData])
      .then(function (results) {
          var data = {
              dashboardData = results[0].data;
              chartData = results[1].data;
              emailData = results[2].data;
          };

          return data;
      });

and then in controller:

dashboardService.loadFromServer().then(function(data) {
    DashboardController.dashboardData = data.dashboardData;
    DashboardController.chartData = data.chartData;
    DashboardController.emailData = data.emailData;
});

In this solution the controller decides what to do with data, not the other way around.

So simple but toiled with it for hours. Thank you! – Tomc-s Oct 15 '16 at 02:47 — Tomc-s, Oct 15 '16 at 02:47

My Service is returning data to the controller but I cannot seem to access it like I would expect.

1 Answers1