CODEWITHSUNDEEP
javascriptangularjsasynchronoushttprequestdeferred
NayMak
NayMak

Reputation: 168

Get back the value of a HTTP Request in Angular JS

I try to create a function which makes a HTTP Request in Javascript and to get the result of this request. Unfortunately, I absolutely don't know how to get back this result in an other function..

Find here both of my function (both should do the same thing) :

$scope.getInfo = function() {
        return $http({
            method: 'GET',
            url: 'https://api.net'
        }).then(function (response) {
            return response.data;
        });
    };

And the other one :

$scope.getInfo = function() {
        var defer = $q.defer();
        $http.get('https://api.net').then(function(response) {
            defer.resolve(response.data);
        }, function(response) {
            defer.reject(response);
        });
        return defer.promise;
    };

I have found a lot of articles about the way to make the request but not to get back its value (a simple call of the function in an other one just display "object object" and I didn't find a solution to display it correctly).

$scope.test = function() {
        var myValue = $scope.getInfo();
        alert(myValue); /* show [Object object] */
    };

Could you help me please?

Upvotes: 2

Views: 2272

Answers (2)

Rathma
Rathma

Reputation: 1313

A common mistake in using $http service is to assign the return value of this service methods to a variable which is a promise which is not what you want.

consider your code below:

$scope.getInfo = function() {
        return $http({
            method: 'GET',
            url: 'https://api.net'
        }).then(function (response) {
            return response.data;
        }).catch(function(error){
            // do something with error
            throw error;
        });
    };

getInfo is a method which returns a promise and that promise in future will resolve to a data value that you want.

If you use it like this in your controller:

$scope.test = function() {
        var myValue = $scope.getInfo();
        alert(myValue); /* show [Object object] */
    };

value of myValue is a promise (you can simply do a console.log(myValue)), the suggested way is to use this method like below:

 $scope.test = function() {
        $scope.getInfo()
           .then(function(response){
                var myValue = response.data;
                alert(myValue); /* show [Object object] */
           }).catch(function(error) {
                console.log(error);
                throw error;
           })

    };

Upvotes: 1

Olivier Boissé
Olivier Boissé

Reputation: 18123

You should proceed like this when using Promise : 

 $http({
     method: 'GET',
     url: 'https://api.net'
 }).then(function (response) {
     $scope.info = response.data
 });

Your current code return a Promise, that's why the result returned by getInfo is considered as an object

If you want getInfo to be a function you can do like this :

$scope.getInfo = function() {
    return $http({
        method: 'GET',
        url: 'https://api.net'
    }).then(function (response) {
        return response.data;
    });
};

$scope.getInfo().then(function(result) {
   alert(result);
});

Upvotes: 1

Related Questions