Angular js and callback when getting a from WebService

Question

I m trying to use a controller callback function inside my service, when it successes an $http post request. Here's my code, the exact description is a bit below.

my controller :

function UserAccountCtrl (UserService, $rootScope, listUsers) {
    $rootScope.title = 'Comptes utilisateurs';
    this.users = listUsers.data;
  this.isShown = false;
  this.isModification = false;

    this.deleteEntry = function(entry){
    this.users.splice(this.users.indexOf(entry), 1);
    UserService.delete(entry); 
  };

  this.show = function(){
    this.isShown = true;
  };

  this.hide = function(){
    this.isShown = false;
  };

  this.save = function(){
    var success = function(data){
      this.users.push(data);
    };

    var err = function(data){
      alert(data);
    };

    UserService.post(this.user, success, err);
    this.hide();
  };
}

My service function :

UserService.post = function (data,succ,err) {
    $http({
        url: __ADRS_SRV__ + "user",
        method: "POST",
        data:data,
        isArray: true
    }).success(function(data){
       succ(data);
    }).error(function(error){
        err(error);
    });
}

The functionnement is simple : when I post a new user, the WebService inserts it in mongo, and returns the fully new object generated. I can get the new object from console.log or with an alert, and it works fine.

But I cant push the new item in my array. I have the error :

Uncaught TypeError: undefined is not a function

At the exact line where I need to push the new item.

So, does anybody have an idea ?

Thanks for advance

check if the save function is beaing called...put an alert/console.log there..and please notify... — Srinath, Jul 30 '14 at 13:20

score 1 · Answer 1 · answered Jul 30 '14 at 13:18

1

Can you try if this works?

this.save = function(){
    var self = this;
    var success = function(data){
      self.users.push(data);
    };

    var err = function(data){
      alert(data);
    };

    UserService.post(this.user, success, err);
    this.hide();
  };

answered Jul 30 '14 at 13:18

Sabacc

729
4
11

It works... But why ? I dont understand what it really implies – mfrachet Jul 30 '14 at 13:24
1

the `success` callback function will be executed from another object from the http request. Resulting that `this` is not the same object as you'd expect it to be (and also not containing any user object which results in the error). By storing your current "this-object" (the object containing the callback function) reference to the `self` variable you can access the properties of the object again. You may want to read more about this, for example here: http://stackoverflow.com/questions/3127429/javascript-this-keyword – Sabacc Jul 30 '14 at 13:41

score 1 · Accepted Answer · edited May 23 '17 at 12:30

this in this.users.push(data); is not the same this as outside of the function and therefore does not have a users array to push the new data to. (See MDN this for more info on this in javascript)

I would actually not use this at all and attach everything to the $scope object as required. This would get around your issue as $scope will be the same no matter what the context.

function UserAccountCtrl ($scope, UserService, $rootScope, listUsers) {
    $scope.users = listUsers.data;
    $scope.save  = function(){
        var success = function(data){
            $scope.users.push(data);
        };

        var err = function(data){
             alert(data);
        };

        UserService.post($scope.user, success, err);
        $scope.hide();
   };
   // do the same with other functions
}

See 'this' vs $scope in AngularJS controllers for more details.

I m actually trying to use the good practices of todd motto http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/ and to use less $scope and more this — mfrachet, Jul 30 '14 at 13:26

Angular js and callback when getting a from WebService

2 Answers2