Ссылаясь на родительский цикл из вложенного цикла

Question

Вот чего я пытаюсь достичь: у меня есть 2 таблицы в моем db - «регионах» и «дистрибьюторах», оба имеют столбец region_id. Я хочу, чтобы:

1) итерация по таблице регионов, для каждой области создайте div с region_id как div id, затем добавьте region_name к этому div.

2) есть вложенный цикл, который будет перебирать стол "дистрибьюторов, тянуть все дистрибьюторы, что имеет тот же region_id, а затем добавить его к тому же DIV от этапа 1.

Так что я попытался это код:

$(function(){ 
    $.getJSON("inc/API.php", {command:"get_regions"}, 
     function(result){ 
      var div_length = 786/result.length; 
      for(var i=0; i<result.length; i++){ 
       var div_name = "div_region_"+result[i].region_id; 
       $("<div id='"+div_name+"' class='div_region' 
        style='width:"+div_length+"px; float:right;'></div>").appendTo("#content"); 

       $("<b>"+result[i].region_name+"</b></br>").appendTo("#"+div_name); 
       $.getJSON("inc/API.php", { 
        command:"get_distributors", 
        region_id: result[i].region_id 
       }, 
       function(result){ 
        for(var j=0; j<result.length; j++){ 
         $("#"+div_name).append(result[j].distributor_name+"</br>"); 
        } 
       }); 
      } 
    }); 
}); 

Хотя это создает дивы и добавляет имена регионов к ним, но имена дистрибьюторов все добавляются к последнему DIV в данный момент. Где моя ошибка здесь и как я могу это исправить?

Answer 1

Это потому, что цикл уже завершен до возвращения функции AJAX.

Изменение второй функции AJAX для:

$.getJSON("inc/API.php", { 
     command:"get_distributors", 
     region_id: result[i].region_id 
    }, 
    function(result){ 
     for(var j=0; j<result.length; j++){ 
      var id = "#div_region_"+ result[j].region_id; //assuming that's how the data is structured 
      $(id).append(result[j].distributor_name+"</br>"); 
     } 
    });