Convert angularjs $http response to string/JSON

Question

Please be patient with me since I'm a beginner.

So I have this factory $http request to the server

$http request

factory.checkPollCodeIfAvail = function(x){
    code = x;
    return $http({
        method: 'POST',
        data: {
            'action' : 'checkPollCode',
            'pollCode' : code
        },
        url: 'http://localhost/poll/api.php',
        transformRequest:function(obj) {
            //transform header query into 'myVar1=var1Value&myVar2=var2Value'
            var str=[];
            for(var p in obj){
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]))
            }
            console.log(str.join("&"));
            return str.join("&"); 
        },
        headers:{'Content-Type':'application/x-www-form-urlencoded'}
    }).then(function(response){
        var i = response.data.message.toString();
        console.log(i);
        return i;
    });
};

which would supposedly return i to my controller:

Controller:

pollCodeStatus = pollFactory.checkPollCodeIfAvail('qwe123');
console.log(pollCodeStatus.toString());

when I try to console.log the i in the $http request i will get a value string but when I tried console.log in the controller what I will get is an object [object Object].

So can I convert an $http object to a string or even json data? if yes, how?

Thank you very much.

Maria Ines Parnisari · Accepted Answer · 2017-05-07 01:45:27Z

2

factory.checkPollCodeIfAvail = function(x){
    code = x;
    return $http({

Your checkPollCodeIfAvail function is not returning i, it's returning a Promise that will eventually resolve to i. What does this mean? The HTTP call is asynchronous, so you need to wait until it finishes.

So in order to capture i in the controller, you need to do this:

pollFactory.checkPollCodeIfAvail('qwe123')
.then(function (pollCodeStatus) {
    console.log(pollCodeStatus)
})

Right now, as you've written it...

pollCodeStatus = pollFactory.checkPollCodeIfAvail('qwe123');
console.log(pollCodeStatus.toString());

...you are kind of expecting checkPollCodeIfAvail to run synchronously, which is not the case.

answered May 7, 2017 at 1:45

Maria Ines Parnisari

17.5k10 gold badges95 silver badges138 bronze badges

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

1 Comment

Zyx Sun Over a year ago

I see that's more understandable. Thank you very much!

Junbang Huang · Accepted Answer · 2017-05-07 01:48:32Z

1

Your problem is $http return a promise object, that means your pollCodeStatus is a promise object.

The function you provide to then will be called if the promise object is resolved. This line return i is the return of the function you provide to then.

If you want to get i, you can use a global variable. Like the following:

var i 
factory.checkPollCodeIfAvail = function(x){
...
.then(function(response){
    i = response.data.message.toString();
});
};
console.log(i);

answered May 7, 2017 at 1:48

Junbang Huang

1,97719 silver badges28 bronze badges

1 Comment

Zyx Sun Over a year ago

Thank you very much! you have almost the same answer as the one below. Thank youuu!!

Prateek Gupta · Accepted Answer · 2017-05-07 02:11:17Z

$http is for making an asynchronous calls and $http returns a promise object which needs to be resolved before accessing it. But in your code you have used it in a synchronous way .

You need to create a deferred object in the factory and return this deferred object. So, here is the updated code :

Inject $q into the factory first.

 factory.checkPollCodeIfAvail = function(x){
    code = x;
    var defered = $q.defer();
    return $http({
        method: 'POST',
        data: {
            'action' : 'checkPollCode',
            'pollCode' : code
        },
        url: 'http://localhost/poll/api.php',
        transformRequest:function(obj) {
            //transform header query into 'myVar1=var1Value&myVar2=var2Value'
            var str=[];
            for(var p in obj){
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]))
            }
            console.log(str.join("&"));
            return str.join("&"); 
        },
        headers:{'Content-Type':'application/x-www-form-urlencoded'}
    }).then(function(response){
        defered.resolve(response.data.message.toString());
        var i = response.data.message.toString();
        console.log(i);
        return i;
    });
  return defered.promise;
};

And in your controller you will resolve like this:

pollFactory.checkPollCodeIfAvail('qwe123').then(function(resp){
console.log(resp);
});

This is the correct way of handling async calls from factory or service. Hope this solves your problem. :)

Collectives™ on Stack Overflow

Convert angularjs $http response to string/JSON

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related