current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 6 down vote favorite
2

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

}
share|improve this question
    
You're doing it correctly in the first sample by assigning it in the callback, why change it? – tymeJV Jul 30 '13 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 Jul 30 '13 at 15:02
up vote 7 down vote accepted

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.

share|improve this answer
    
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. – Joel Anair Jul 30 '13 at 15:19
    
@tymeJV - Update post with working code .. thanks! – Ravi Ram Aug 8 '13 at 22:17
1  
.success() has been depreced in Angular 1.4 insted of it use then() – marco gomes Aug 22 '15 at 11:13
up vote 8 down vote

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;
});
share|improve this answer
    
Nice approach, +1 – tymeJV Jul 30 '13 at 15:18
1  
@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) – Todilo Jan 16 '15 at 14:43
up vote 2 down vote

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
})
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.