How do I get JSON data from an external file in jQuery and ensure the data is loaded before the remainder of the script

Question

I'm attempting to extract a JSON object from a .json file (hosted locally to the script) and saving the data as a variable. Currently, I'm using jQuery's $.getJson() function, which works fine, I just want to ensure that the JSON data is loaded before finishing the rest of the script as some functions rely on it.

Any ideas?

Answer 1

see documentation on getJson

if you want it should run and other section should wait, you can set 'asysn' : false but it is not a good idea, since the code after the ajax will wait until it completes.

OR

// check the meaning of done, fail, always
    $.getJSON( "url", function() {
    
    }).done(function(){
    
        // your rest of the code
        
    });

or you may try custom trigger event

$(function(){

    $.getJSON( "url", function() {

    }).done(function(){
        $( document ).trigger( "jsonSuccess", [ "bim", "baz" ] );
    });

    $( document ).on( "jsonSuccess",function(event, var1, var2){
        // will execute after the 'getJSON' success 
    });
    
    // other codes can be execute from here, it will not wait

});