CODEWITHSUNDEEP
angularjs
Med
Med

Reputation: 221

data is undefined in the controller

I'm trying to display a date that I'm getting from a server, I'm able to retreive it and display it correctly in the service but in my controller it's undefined would you help me to get this fixed. here is my service

function footerService($http,$filter) {
var dateFormat = 'yyyy-MM-dd';
var statusDate = {};

statusDate.getStatusDate = function() {
    $http.get(_contextPath + "/getDate", {}).success(
            function(response) {
                console.log('response', response)
                statusDate.Date = $filter('date')(
                        new Date(response.Date), dateFormat);
                console.log('Date', statusDate.Date)
                return statusDate.Date;
            });
};
return statusDate;

};

and in my controller 

function footerController($scope,footerService) {
$scope.myDate = footerService.getStatusDate();
console.log('$scope.myDate', $scope.myDate);
};

Upvotes: 0

Views: 65

Answers (5)

user6373040
user6373040

Reputation:

In the service you need to return the promise from the $http request.

Try:

function footerService('$http', [$http]) {
    var statusDate = {};

    getStatusDate = function() {
        return $http.get(_contextPath + "/getDate", {})
    };
    return {
        getStatusDate: getStatusDate
    };

};

And your controller like this:

function footerController($scope,footerService) {
    footerService.getStatusDate().then(function(results) {
        $scope.myDate = results.data;
    });
    $scope.$watch(function() {return $scope.myDate;}, function() {
        console.log('$scope.myDate', $scope.myDate);
    });

};

And you would apply your filter logic in the .then() method in the controller.

Upvotes: 0

Suneet Bansal
Suneet Bansal

Reputation: 2702

Since .success(function(){}) is the callback so you can not return any value from there. The best solution for it to pass one successCallback from controller to getStatusDate and pass the expected response from .success(function(response){}) to successCallback. By doing this you will be able to get the service response in your controller.

Code is attached below:

function footerService($http,$filter) {
  var dateFormat = 'yyyy-MM-dd';
  var statusDate = {};

  statusDate.getStatusDate = function(successCallback) {
      $http.get(_contextPath + "/getDate", {}).success(
            function(response) {
                successCallback($filter('date')(new Date(response.Date), dateFormat));
            });
  };
  return statusDate;

};


function footerController($scope, footerService) {
     function successCallback(res) {
         $scope.myDate = res;
         console.log('$scope.myDate', $scope.myDate);   
     }

     footerService.getStatusDate(successCallback);
};

Upvotes: 0

Kyle
Kyle

Reputation: 5537

function footerService($http, $filter) {
    return {
        getStatusDate = function() {
            return $http.get(_contextPath + '/getDate', {});
        }
    };
}

function footerController($scope, footerService) {
    $scope.myDate;

    footerService.getStatusDate().then(function(response){
        $scope.myDate = response.data.Date;
    }).catch(function(response){
       //error 
    });
}

Upvotes: 0

Avraam Mavridis
Avraam Mavridis

Reputation: 8920

You can use $q.defer :

function footerService($http,$filter) {
    var dateFormat = 'yyyy-MM-dd';
    var statusDate = {};

    statusDate.getStatusDate = function() {
        var deferred = $q.defer();

        $http.get(_contextPath + "/getDate", {}).success(
            function(response) {
                statusDate.Date = $filter('date')(
                        new Date(response.Date), dateFormat);
                deferred.resolve(statusDate.Date );
            });

       return deferred;
    };

  return statusDate;

};

And then:

footerService.getStatusDate()
.then(function(data) {
   $scope.myDate = data;
});

Upvotes: 1

Neozaru
Neozaru

Reputation: 1130

Using $http means using async Promises. You can define what happens when the async call is successful using then :

footerService.getStatusDate()
.then(function(receivedDate) {
   $scope.myDate = receivedDate;
   console.log('$scope.myDate', $scope.myDate);
});

Plus don't forget the return in getStatusDate (return $http.get...).

More info about async Promises : https://docs.angularjs.org/api/ng/service/$q

Upvotes: 0

Related Questions