Angularjs $http then function

Question

I've created a JS Object with a method that calls a $http to retrieve a value, but when the $http is done I want to assign this value to a property, I can't seem to be able to get this value:

the property this.user always ends up with the promise itself, but I want to assign the value returned from the XHR Request or undefined on failure, I think this is a context problem, I just don't know how to fix it

var Ticket = function(numint, company_id, user_id, title, description, priority, status, assignation, created_at) {
            this.numint         = numint;
            this.company_id     = company_id;
            this.user_id        = user_id;
            this.title          = title;
            this.description    = description;
            this.priority       = priority;
            this.status         = status;
            this.assignation    = assignation;
            this.created_at     = created_at;

            this.user           = undefined;

            this.getUser = function() {

                if(this.user_id === undefined)
                    return false;

                var http = 
                    $http({
                        method  : 'GET',
                        url     : '/users/' + this.user_id,
                        timeout : 100000,
                        headers : {'Content-Type': 'application/x-www-form-urlencoded'}
                    });

                this.user = http
                    .then(
                        function(data) {
                            return data;
                        }
                        , 
                        function() {
                            return undefined;
                        });

                return http;

            }
        };

`$http` is an async operation - you can't `return` the value from the success handler and assign it `this.user` - you have to assign it inside the handler: `self.user = data;` and assign `var self = this;` beforehand — New Dev, Feb 20 '15 at 16:55
yes I though so, But how do I reference the this.user inside the handler??? if I type this.user... the context is wrong, the this is pointing to the handler — Gabriel Matusevich, Feb 20 '15 at 16:56

score 2 · Accepted Answer · edited Feb 20 '15 at 17:01

2

var http is a promise object because the return value of Angular's $http service is a promise (docs). Use .then() to get the return value once the AJAX request has returned and the promise has resolved.

var self = this;

http.then(function (data) {
  self.user = data;
});

edited Feb 20 '15 at 17:01

New Dev

48,427
12
87
129

answered Feb 20 '15 at 16:55

Morgan Polotan

223
2
9

I've tried this, it doesn't work, the this is pointing to the function handler, not to my object – Gabriel Matusevich Feb 20 '15 at 16:56
@GabrielMatusevich, I edited Morgan's question to fix the `this` reference – New Dev Feb 20 '15 at 17:04
slight difference. instead of then I used .success so data is the actual data. otherwise I had to do data.data – Gabriel Matusevich Feb 20 '15 at 17:12
1

@GabrielMatusevich it's fine to use .success() to just return the data instead of .then() to return the whole response object. Just remember that .success() and .error() are convenience functions unique to Angular's $http and $resource services. So if you ever change your code so that the promise is not returned from $http (such as loading data from a cache) then .success() and .error() will no longer be there. A more in-depth explanation of the difference between .success(), .error() and .then() can be found [here](http://www.dwmkerr.com/promises-in-angularjs-the-definitive-guide/). – Morgan Polotan Feb 21 '15 at 18:35

score 0 · Answer 2 · answered Feb 20 '15 at 16:59

var Ticket = function(numint, company_id, user_id, title, description, priority, status, assignation, created_at) {
        var self = this; // new code
        self.numint         = numint; //use self inseat
        self.company_id     = company_id;

        this.getUser = function() {

            if(self.user_id === undefined) // you had one preblem here, because "this" here is direrent to the this.user_id you neded, so use self
                return false;

            var http = 
                $http({
                    method  : 'GET',
                    url     : '/users/' + this.user_id,
                    timeout : 100000,
                    headers : {'Content-Type': 'application/x-www-form-urlencoded'}
                }).then(function (data){
                      self.user = data
                   ;},
                 function () {
                  self.user= undefined;
                   });


        }
    };

score 0 · Answer 3 · answered Feb 20 '15 at 17:04

assign this to a different value OR! or us .bind.

$http({
  method  : 'GET',
  url     : '/users/' + this.user_id,
  timeout : 100000,
  headers : {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function (data){
  this.user = data;
}.bind(this));

Angularjs $http then function

3 Answers3