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

}

Answer 1

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

Answer 2

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.

Answer 3

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