AngularJS - scope variable does not get updated from method

Question

I'm totally new to AngularJs and I have this problem I do not understand. I have two methods. The first one takes some data from a webservice and puts in in a variable defined in the scope. But when I want to use that variable in the second method it is undefined. Can someone help me understand why this is happening and provide a solution?

var myApp= angular.module( "myApp", [] );

myApp.controller("myAppController",
function( $scope ) {
$scope.getAll = function(){
    $.ajax({
        type: "GET",
        dataType: "jsonp",
        contentType: "application/json; charset=utf-8",
        url: ..something...,
        success: function (parameters) {
            $scope.profiles = angular.copy(parameters);  <-- correct data is returned
            $scope.$apply();
        },
        error: function () {
            alert("Error calling the web service.");
        }
    });
}
$scope.getCategories = function(){
    var all = $scope.profiles;    <-- At this point profiles is empty
    ...
}
    $scope.getAll();
    $scope.getCategories();
}

use the $http service

Guillaume86
– Guillaume86

2013-05-03 10:32:18 +00:00
Commented May 3, 2013 at 10:32 — Guillaume86
– Guillaume86, Commented May 3, 2013 at 10:32

Guillaume86 · Accepted Answer · 2013-05-03 10:59:14Z

2

Use the $http service and promises:

$scope.profiles = $http.jsonp(url).then(function(r){ return r.data; });
$scope.categories = $scope.profiles.then(function(profiles) {
  var params = { }; // build url params
  return $http.jsonp(url, { params: params }).then(function(r){ return r.data; });
});

answered May 3, 2013 at 10:59

Guillaume86

14.4k4 gold badges56 silver badges57 bronze badges

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

Comments

laurent · Accepted Answer · 2013-05-04 06:04:21Z

When you call getCategories(), getAll() hasn't finished yet, which is why profiles is empty. There are several ways to solve this. The best way would be to use promises the built-in $http service.

If you prefer to use jQuery, you can add a watcher on the profiles variable and only when it's populated run the getCategories().

Something like this should work:

$scope.getAll = function(){
    $.ajax({
        type: "GET",
        dataType: "jsonp",
        contentType: "application/json; charset=utf-8",
        url: ..something...,
        success: function (parameters) {
            $scope.profiles = angular.copy(parameters);  <-- correct data is returned
            $scope.$apply();
        },
        error: function () {
            alert("Error calling the web service.");
        }
    });
}

$scope.getCategories = function(){
    var all = $scope.profiles;

}

// Wait for the profiles to be loaded
$scope.watch('profiles', function() {
    $scope.getCategories();
}

$scope.getAll();

NilsH · Accepted Answer · 2013-05-03 10:14:59Z

1

There is no guarantee that getAll has completed before getCategories is invoked, since it is an asynchronous request. So if you want to sequentially invoke getAll and getCategories, you should invoke getCategories inside the success callback of getAll. You could also look into promises for a neater way of chaining asynchronous callbacks (I assume you're using jQuery since you're calling $.ajax).

...
<snipped some code>

success: function(parameters) {
    // snipped more code
    $scope.getCategories();
}

(and if you're using jQuery promises)

$.ajax(ajaxCallOneOpts).then($.ajax(ajaxCallTwoOpts));

Neither are very "Angularish" though, so you might want to look into some of the provided services for working with http/rest resources instead of using jQuery.

edited May 3, 2013 at 10:14

answered May 3, 2013 at 10:08

NilsH

13.9k4 gold badges43 silver badges59 bronze badges

Comments

JoeG · Accepted Answer · 2013-05-03 10:19:14Z

1

Why are you using a jQuery ajax request in angular? If you write jQuery style code and wrap it angular, you're going to have a bad time...

Here is an angularised version:

myApp.controller("myAppController",
function( $scope, $q, $http ) {

  $scope.getAll = function(){
    var deferred = $q.defer();
    $scope.profiles = deferred.promise;
    $http.jsonp('your url').then(function(data) {
      deferred.resolve(data);
    }); 
  });

  $scope.getCategories = function(){
    $q.when($scope.profiles).then(function(profiles) {  
       ... <-- At this point profiles is populated
    });    
  }

  $scope.getAll();
  $scope.getCategories();
}

answered May 3, 2013 at 10:19

JoeG

13.2k1 gold badge40 silver badges64 bronze badges

Collectives™ on Stack Overflow

AngularJS - scope variable does not get updated from method

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related