javascript - Return object from AngularJS $http get - Stack Overflow

admin管理员组

文章数量:1205743

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

}

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

}

• javascript
• ajax
• angularjs

Share Improve this question Follow edited Aug 8, 2013 at 22:15 Ravi Ram asked Jul 30, 2013 at 14:59 Ravi RamRavi Ram 24.5k2121 gold badges8686 silver badges119119 bronze badges 2

• You're doing it correctly in the first sample by assigning it in the callback, why change it? – 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 Commented Jul 30, 2013 at 15:02

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 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;
});

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.

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

本文标签： javascriptReturn object from AngularJS http getStack Overflow