Return object from AngularJS $http get

Question

I am using the follow code to get json object and bind it to the $scope

WORKING CODE:

$http({
    url: '/Home/GetJson',
    method: "GET",
    params: {
        clientID: cId
    }
}).success(function (data) {
    $scope.members = data.members;
})

It works .. what I would like to do is get the results into a var data then add it to the $scope.

FAILING CODE :

var data = $http({
    url: '/Home/GetJson',
    method: "GET",
    params: {
        clientID: cId
    }
}).success(function (data) {
    return data.members;
})

$scope.members = data;

When I look at $scope.members, it is empty in the failing code because $scope.members is empty when it is filled (js is event based).

How can I wait till json returns > then var = data > then $scope.members = data ?

WORKING CODE

I used Javascript callback functions as below

Call my main function

DoLogin($scope, $http, email, password, AssingMemberToScope);


function DoLogin($scope, $http, email, password, callback) {
$http({
    url: '/Home/GetJson',
    method: "GET",
    params: {
        clientID: cId
    }
}).success(function (data) {
    callback($scope, data);   //<----- Call Back occurs
})
}

//--Call-back Function working and code is separated --/

function AssingMemberToScope($scope, data) {
    if (data.msg) {
        $('.loading').hide();
        $scope.member = data.member;
    } else {
        $('.loading').hide();
        $('#msg').show();
    }

}

You're doing it correctly in the first sample by assigning it in the callback, why change it? — tymeJV
– tymeJV, Commented Jul 30, 2013 at 15:01
I wanted to place the entire json call in a separate function and return the data into the function so I can do some stuff to it. — Ravi Ram
– Ravi Ram, Commented Jul 30, 2013 at 15:02

zs2020 · Accepted Answer · 2013-07-30 15:15:39Z

9

Try this pattern:

angular.module('App').factory('service', function ($http) {
    var service = {
        myFunction: function (query) {
            var promise = $http({
                url: '/Home/GetJson',
                method: "GET",
                params: {
                    clientID: cId
                }
            }).success(function (data) {
                return data.members;
            });
            return promise;
        };
    }
});

Then when consume the service, do

service.myFunction(query).then(function (data) {
    $scope.members = data.members;
});

answered Jul 30, 2013 at 15:15

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

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

1 Comment

Todilo Over a year ago

@zsong what does the success method do here? It does not return data.members to the consumer(since well you have to write data.members again)

tymeJV · Accepted Answer · 2013-07-30 15:07:38Z

7

I think a better approach would be to put the JSON call into a function that accepts a callback function as a parameter. Quick example:

function makeJSONCall(callback) {
    $http({
        url: '/Home/GetJson',
        method: "GET",
        params: { clientID: cId }
    }).success(function (data) {
        callback(data);
    });
}

function someFunctionCallback(param) {
    console.log(param) 
}

Now, inside that callback function, do what you want with the data. You can also call the JSON function when you need it now, a simple makeJSONCall(someFunctionCallback) will do.

answered Jul 30, 2013 at 15:07

tymeJV

105k14 gold badges165 silver badges158 bronze badges

2 Comments

Joel Anair Over a year ago

I like this answer. Promises are very cool but add complexity. This represents a much more straightforward approach that will probably work in most situations.

Marcogomesr Over a year ago

.success() has been depreced in Angular 1.4 insted of it use then()

DotDotDot · Accepted Answer · 2013-07-30 15:15:34Z

2

You actually explained it yourself in your last sentence, you can use promises and their then() callback

var data = $http({
 url: '/Home/GetJson',
 method: "GET",
 params: { clientID: cId }
 })
.then(function (data) {
     return data.members;
})
};

...
...
data.then(function(response){
    //play with the data
    $scope.data=response
})

answered Jul 30, 2013 at 15:15

DotDotDot

3,5662 gold badges22 silver badges22 bronze badges

Collectives™ on Stack Overflow

Return object from AngularJS $http get

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related