Angular JS: Service Response not Saving to Variable

Question

I'm trying to work out why the response of this service isn't saving to $scope.counter. I've added a function to my service fetchCustomers(p) which takes some parameters and returns a number, which I'd like to save to $scope.counter.

service

angular.module('app')
.factory('MyService', MyService)

function MyService($http) {
  var url = 'URL'';

  return {
    fetchTotal: function(p) {
      return $http.get(url, { params: p })
        .then(function(response) {
          return response.data.meta.total;
        }, function(error) {
          console.log("error occured");
        })
    }
  }
}

controller

$scope.counter = MyService.fetchTotal(params).then(function(response) {
  console.log(response);
  return response;
});

For some reason though, this isn't working. It's console logging the value, but not saving it to $scope.counter. Any ideas?

Probably just a typo but you have an extra quote around 'URL'' — Phil
– Phil, Commented Oct 29, 2015 at 0:04
you're assigning $scope.counter to the returned promise, not the response. Your callback should have the assignment $scope.counter = response — logee
– logee, Commented Oct 29, 2015 at 0:05

Jeff · Accepted Answer · 2015-10-29 00:19:51Z

3

If I understand your question correctly, you're setting $scope.counter to a promise, not the response.

MyService.fetchTotal(params).then(function(response) {
  // Anything dealing with data from the server
  // must be put inside this callback
  $scope.counter = response;
  console.log($scope.counter); // Data from server
});

// Don't do this
console.log($scope.counter); // Undefined

edited Oct 29, 2015 at 0:19

answered Oct 29, 2015 at 0:05

Jeff

2,0682 gold badges16 silver badges18 bronze badges

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

9 Comments

realph Over a year ago

But when I now do a $scope.counter, it comes back as undefined:

MyService.fetchTotalCustomers(params).then(function(response) {   $scope.counter = response; });  console.log($scope.counter);

Jeff Over a year ago

console.log(response.data.meta.total) in your service, see if thats undefined.

realph Over a year ago

That logs out the number. This is why it's driving me nuts.

Jeff Over a year ago

Put this inside the promise callback. .then(function(response) { $scope.counter = response; console.log($scope.counter); }); Notice the console.log() is now inside the promise callback.

Jeff Over a year ago

As soon as you set $scope.counter in the promise callback, it's available for use in the view. It should be working at this point. Have you tested it? If not, update your question with your HTML markup

|

Collectives™ on Stack Overflow

Angular JS: Service Response not Saving to Variable

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related