CODEWITHSUNDEEP
javascriptjqueryjson
Stan
Stan

Reputation: 38255

jQuery Multiple getJSON requests

My script needs to fetch several json files on https://graph.facebook.com/xxxx, and retrieve a certain field from each json, then calculate summation.

My problem is how to print out the result after all getJSON done? With below code it will prints 0. Feel free to suggest any better approaches. 

var result = 0;
$.each(urls, function (i, url) {
    $.getJSON(url, function (json) {
        result += json.field1;
    })
});
alert(result);

Upvotes: 6

Views: 9688

Answers (2)

Alnitak
Alnitak

Reputation: 339816

Using jQuery 1.5 deferred objects:

Accumulate an array of the JQXHR objects returned by $.getJSON()

var jxhr = urls.map(function(url) {
    return $.getJSON(url, function(json) {
        result += json.field1;
    })
});

and only $.when they're all .done():

$.when.apply($, jxhr).done(function() {
    alert(result);
});

NB: this will accumulate result in the order that the AJAX calls complete, not in the order they're made.

Upvotes: 23

nixon
nixon

Reputation: 1972

It's not working as you are printing the result straight away, remember that the code where you concatenate the result is a callback so will fire after your alert.

On each callback you'll have to check if all have finished. replace the alert() call with your processing. :)

    var result = 0;
    var doneCount = 0;

    $.each(urls, function (i, url) {
        $.getJSON(url, function (json) {
            doneCount++;
            result += json.field1;
            if (doneCount == urls.length) {
                alert(result);
            }
        })
    });

Upvotes: 3

Related Questions