How to make the page load only after the return of getJSON?

Question

I am recovering a list in JSON using the function jQuery.getJSON:

http=jQuery.getJSON(url);

This code returns the object perfectly, but the request takes longer than the loading time of the page where I will enter the data. This way, the page loads with the object yet null.

How to make the page load only after the return of getJSON?

Answer 1

Pass a callback to the getJSON:

jQuery.getJSON(url, function(dados) {
    // aqui o json já carregou e pode ser acessado como "dados"
});

Answer 2

So, in my view, it is the server who should perform the search and embed the data directly in the page that will be served (as a result of server processing).

In most cases (and I say this only because, in some cases, as when we do not have access to the server, it is really justifiable to perform this task via Javascript), there is no purpose in serving a blank page, and that remains "frozen" until an AJAX request returns the data from the server. I recommend that you do not use AJAX, and instead manage the page already with the data embedded in server side.

However, if you need to apply this model, just use the third parameter (callback) of function getJSON() (which is the function to be executed upon receipt of the reply) to proceed with the execution in an asynchronous manner:

$.getJSON(v_url, v_data, function(data){
    prosseguirExecucao(data);
}

Where data will be the literal object with your data.

If you want a synchronous run (which, as @bfavaretto pointed out, is that routine call category that prevents the program from processing anything else until the called routine ends), just run, before the previous script, the following excerpt:

$.ajaxSetup({
    async: false
});

EDIT: the above section changes the way all AJAX requests, from then on, will be made by jQuery. Since getJSON() is nothing more than a syntax abbreviation for a call AJAX() common, it will suffer the effect of ajaxSetup() also, but if your intention is to only request JSON synchronously, you need to restore the configuration to asynchronous mode again after the getJSON():

$.ajaxSetup({
    async: true
});

Answer 3

You can use the method $.holdReady(), in this way:

$.holdReady(true);
$.getJSON(url, function(json) {
    // algum processamento com o json

    $.holdReady(false);
});

So you can use the method .ready() from jQuery to run your scripts only after json return.

$(document).ready(function() {
    // código executado depois do carregamento do json
});

See more information on this link.