Is it possible to run an Ajax function inside an jqxhr.done function?

Question

var json = $.getJSON("sun.json", function(json1) {
    $.each(json1, function(key, data) {
        //Json Code
    });
});
json.done(function() {
    $.getJSON("sun2.json", function(json1) {
        $.each(json1, function(key, data) {
            //More json Code
        });
    });
});

Would it be possible to do this? I want to generate some stuff with the first json file, then when it is done, do more stuff with the second json file. I don't see why it wouldn't work, but I figured I'd get some clarification here just in case.

Yes you can, but if you want to pass the data around from the second json call it would get more complex, then you have to return a promise which you can then pass out of the first json.done(). — Chrillewoodz, Jul 11 '15 at 21:07
Please note that there is no such thing as a "json function". — Felix Kling, Jul 11 '15 at 21:36

sfletche · Accepted Answer · 2015-07-12T15:53:12.650

3

Yes, you can execute $.getJSON inside the .done function.

That said, a good practice for chaining the $.getJSON calls (thanks to the jquery promise interface) would be to utilize the then function and might look something like this...

$.getJSON("sun.json", function(json) {
    $.each(json, function(key, data) {
        //do something
    });
})
.then(function() {
    return $.getJSON("sun2.json", function(json) {
        $.each(json, function(key, data) {
            //do something with sun2.json
        });
    });
})
.then(function() {
    return $.getJSON("sun3.json", function(json) {
        $.each(json, function(key, data) {
            //so something with sun3.json
        });
    });
});

Chaining the deferred promises like this prevents the "callback pyramid of doom" allowing for a flatter and more readable code structure.

ADDENDUM Thanks to @BenjaminGruenbaum for clearing up my earlier confusion!

edited Jul 12 '15 at 15:53

answered Jul 11 '15 at 21:07

sfletche

47,248
30
103
119

I have no idea how this got accepted - `done` ignores return values, this also has the deferred anti pattern (explicit construction antipattern). – Benjamin Gruenbaum Jul 12 '15 at 08:58
@BenjaminGruenbaum - thanks for the feedback, I'd welcome additional feedback on my edited answer if you'd care to comment further. – sfletche Jul 12 '15 at 15:36
Your update won't work - you need to `return` from the `then`, getJSON already returns a promise. What you were doing is http://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it – Benjamin Gruenbaum Jul 12 '15 at 15:37
Also, your first example would still not work since `done` ignores return values, so probably don't recommend it :) Anyway I've reverted the downvote. – Benjamin Gruenbaum Jul 12 '15 at 15:44
@BenjaminGruenbaum - Thanks. And am I correct in thinking that by returning the `$.getJSON` from each `then` that this will now work as intended? – sfletche Jul 12 '15 at 15:46
Awesome. Thanks again @BenjaminGruenbaum. I've edited my answer in full now. – sfletche Jul 12 '15 at 15:53
Additionally, you might want to avoid the `$.getJSON` success callback (second argument) altogether and *only* use `then`. – Bergi Jul 12 '15 at 16:48

Is it possible to run an Ajax function inside an jqxhr.done function?

1 Answers1