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 Mandava
– Srinath Mandava, Commented Jul 30, 2014 at 13:20

Community · Accepted Answer · 2017-05-23 12:30:09Z

1

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.

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Jul 30, 2014 at 13:24

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

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

1 Comment

mfrachet Over a year ago

I m actually trying to use the good practices of todd motto toddmotto.com/opinionated-angular-js-styleguide-for-teams and to use less $scope and more this

Sabacc · Accepted Answer · 2014-07-30 13:18:08Z

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, 2014 at 13:18

Sabacc

7896 silver badges13 bronze badges

2 Comments

mfrachet Over a year ago

It works... But why ? I dont understand what it really implies

Sabacc Over a year ago

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: stackoverflow.com/questions/3127429/javascript-this-keyword

Collectives™ on Stack Overflow

Angular js and callback when getting a from WebService

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related