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
– New Dev, Commented Feb 20, 2015 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
– Gabriel Matusevich, Commented Feb 20, 2015 at 16:56

New Dev · Accepted Answer · 2015-02-20 17:01:59Z

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, 2015 at 17:01

New Dev

49.8k12 gold badges99 silver badges139 bronze badges

answered Feb 20, 2015 at 16:55

Morgan Polotan

2232 silver badges9 bronze badges

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

4 Comments

Gabriel Matusevich Over a year ago

I've tried this, it doesn't work, the this is pointing to the function handler, not to my object

New Dev Over a year ago

@GabrielMatusevich, I edited Morgan's question to fix the this reference

Gabriel Matusevich Over a year ago

slight difference. instead of then I used .success so data is the actual data. otherwise I had to do data.data

Morgan Polotan Over a year ago

@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.

bto.rdz · Accepted Answer · 2015-02-20 16:59:26Z

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;
                   });


        }
    };

Danny Blue · Accepted Answer · 2015-02-20 17:04:29Z

0

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));

answered Feb 20, 2015 at 17:04

Danny Blue

4634 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angularjs $http then function

3 Answers 3

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Linked

Related