Manipulating variable returned that is returned by promise AngularJS

Question

So, I am stuck here most probably because of my limited understanding of promise Object.

my function that fetch data from factory is

    $scope.getLogoFromService = function() {
    console.log('getLogoFromService called');
    var promise = 
        logoService.getLogo();
    promise.then(
       function(payload) { 
           console.log(payload.data.home_header.logo.file_path);
           $scope.logoPath = payload.data.home_header.logo.file_path;
       },
       function(errorPayload) {
           $log.error('failure loading logo', errorPayload);
       });
  };

the Variable is accessible on the view if I do {{logoPath}}, and when I console.log inside the function, but not accessible in another function.

   $scope.UpdateLogo = function ()
        {
            console.log('UpdateLogo called');
            console.log($scope.logoPath);
        }

returns undefined.

my service code, just in case you need to view

App.factory('logoService', function($http) {
    return {
      getLogo: function() {
         return $http.get('cms/general');
      }
    }
  });

When and where does UpdateLogo get called? You're likely calling it before the promise has resolved. — UncleDave
– UncleDave, Commented Apr 14, 2018 at 11:57
Or calling it in another controller context. Please provide a minimal reproducible example — charlietfl
– charlietfl, Commented Apr 14, 2018 at 11:58
I am calling both functions after getting the page content, at the end of controller $scope.getLogoFromService(); $scope.UpdateLogo(); — IrfanAnwar
– IrfanAnwar, Commented Apr 14, 2018 at 12:00
If you're saying you call both getLogoFromService and UpdateLogo at the same time then that is your problem; $scope.logoPath is infact undefined when UpdateLogo is called. — UncleDave
– UncleDave, Commented Apr 14, 2018 at 12:01
So, should I call getLogoFromService inside UpdateLogo ? how? — IrfanAnwar
– IrfanAnwar, Commented Apr 14, 2018 at 12:04

UncleDave · Accepted Answer · 2018-04-14 12:20:46Z

1

It looks like you're calling UpdateLogo before your http call has returned, I would recommend handling it this way:

$scope.getLogoFromService = function() {
  console.log('getLogoFromService called');
  var promise = logoService.getLogo();

  promise.then(
    function(payload) { 
      console.log(payload.data.home_header.logo.file_path);
      $scope.logoPath = payload.data.home_header.logo.file_path; // For use in the view.
      return $scope.logoPath; // Return the logopath to the next function in the chain.
    },
    function(errorPayload) {
      $log.error('failure loading logo', errorPayload);
    }
  );

  return promise;
};

$scope.UpdateLogo = function() {
  console.log('UpdateLogo called');
  $scope.getLogoFromService().then(function(logoPath) {
    console.log('getLogoFromService resolved!');
    console.log(logoPath);
  });
}

Since logoPath is assigned to the scope you don't technically have to worry about passing it down the promise chain, but this is best practice so I've suggested it first, alternatively this will also work:

$scope.getLogoFromService = function() {
  console.log('getLogoFromService called');
  var promise = logoService.getLogo();

  promise.then(
    function(payload) { 
      console.log(payload.data.home_header.logo.file_path);
      $scope.logoPath = payload.data.home_header.logo.file_path; // For use in the view.
    },
    function(errorPayload) {
      $log.error('failure loading logo', errorPayload);
    }
  );

  return promise;
};

$scope.UpdateLogo = function() {
  console.log('UpdateLogo called');
  $scope.getLogoFromService().then(function() {
    console.log('getLogoFromService resolved!');
    console.log($scope.logoPath);
  });
}

In this case we're just using the promise as a "the data is available now" notification, but we don't actually pass the data since it has been assigned to the $scope and both functions have access to that.

The whole thing could also be compressed to one simpler function but I've kept your original structure intact.

edited Apr 14, 2018 at 12:20

answered Apr 14, 2018 at 12:08

UncleDave

7,2492 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

IrfanAnwar Over a year ago

angular.js:11655 TypeError: $scope.getLogoFromService.then is not a function at b.$scope.UpdateLogo (localhost/ondaq/asset/js/Controllers/healthController.js:34:39) at Object.<anonymous>

IrfanAnwar Over a year ago

Thank you very much. I need to get hell lot better at this stuff, can you suggest how I do it, Meanwhile accepting it as answer.

UncleDave Over a year ago

John Papa has a number of good guides and tutorials, his Angular Style Guide is officially endorsed and provides high level advice on just about everything.

Collectives™ on Stack Overflow

Manipulating variable returned that is returned by promise AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related