How do I check when nested $.getJSON requests have finished running?
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-request-are-done">Wait until all jquery ajax request are done?</a><br>
  <a href="http://stackoverflow.com/questions/8726046/multiple-ajax-calls-inside-a-each-function-then-do-something-once-all-of-the">Multiple ajax calls inside a each() function.. then do something once ALL of them are finished?</a>  </p>
</blockquote>



<p>The function below runs all this code at document ready but I am trying to run other functions when all the data from these completes.</p>

<pre><code>function loadZonesDistrictsStoresData(){
        $.getJSON('/CampaignMgmt/GetZonesByClient', { 'clientid': clientid }, function (zones){
            $.each(zones, function(index, zoneid){
                var li_tag = '&lt;li id="'+ zoneid +'"&gt; &lt;label&gt;&lt;input id="'+zoneid+'" data-id="'+zoneid+'" onchange="zones.selectZone(this.value)" type="checkbox" name="zone_'+zoneid+'" value="'+ zoneid +'"&gt;&lt;span&gt;' + zoneid +'&lt;/span&gt; &lt;/label&gt;&lt;/li&gt;';
                $("ul.zones").append(li_tag);
                $.getJSON('/CampaignMgmt/GetDistrictsByZone', {'clientid': clientid, 'zone': zoneid }, function(data){
                    zone_object[zoneid] = data;
                    $.each(data, function(index, districtid){
                        $.getJSON('/CampaignMgmt/GetStoresByDistrict', {'clientid': clientid, 'district': districtid }, function(stores){
                            districts_object[districtid] = stores;
                        });
                    });
                });
            });
        });
    }
</code></pre>
