ul il 목록 구조 javaScript

Question

다음과 같은 구조를 국가,도, 도시 및 교외로 가지고 있습니다. 구조체와 함께 다음을 목록에 추가하려면 어떻게합니까? 나는 테이블에 따라 json 형식으로 DB에서 데이터를 가져올 것이다. 저장하고 벨로우즈와 같은 목록에 저장하고 싶습니다.

<li>South Africa</li> 
<ul> 
<li><h3>Gauteng</h3><p>Gauteng Province.</p> 
<ul> 
    <li>Ekhurhuleni       
    <ul>       
    <li class="liid"><a href="#">Actionville</a></li> 
    <li class="liid"><a href="#">Alberton</a></li> 
    <li class="liid"><a href="#">Bakerton</a></li> 
    <li class="liid"><a href="#">Bedfordview</a></li> 
</ul>     
</li> 
</ul> 

키를 유지해야하므로 구조를 데이터베이스에 다시 추가해야합니다.

Table Country 
CountryID Country 
1   South Africa 
2   Egypt 


Table Province 
ProvinceID Provincename CountryID 
1    Gauteng  1 
2    Eastern Cape 1 
3    Free State 1 

Table City 
CityID  CityName  ProvinceID 
1    Ekurhuleni  1 


Table Suburb 
SuburbID  SuburbName  CityID 
1    Actonville  1 
2    Germiston  1 

Answer 1

PHP :

$countries = array(); 
$q = "SELECT * FROM Country"; 
$res = mysql_query($q); 
while($row=mysql_fetch_assoc($res)){ 
    $countryId = $row['CountryID']; 
    $countries[$countryId] = array("data"=>$row,"provinces"=>array()); 
    $provinces = &$countries[$countryId]["provinces"]; 
    $qP = "SELECT * FROM Province P WHERE P.CountryID = $countryId"; 
    $resP = mysql_query($qP); 
    while($rowP = mysql_fetch_assoc($resP)){ 
     $provinceId = $rowP['ProvinceID']; 
     $provinces[$provinceId] = array("data"=>$rowP,'cities'=>array()); 
     $cities = &$provinces[$provinceId]; 
     $qC = "SELECT * FROM City C WHERE C.ProvinceID = $provinceId"; 
     $resC = mysql_query($qC); 
     while($rowC = mysql_fetch_assoc($resC)){ 
      $cityId = $rowC['CityID']; 
      $cities[$cityId] = array("data"=>$rowC,'suburbs'=>array()); 
      // AND SO ON FOR SUBURBS 
     } 
    } 
} 

$output="<ul>"; 
foreach($countries as $countryId=>$countryArray){ 
    $output.="<li id='$countryId'>"; 
    $output.="<h1>".$countryArray['data']['countryName']."</h1>"; 
     $output.="<ul>"; 
     foreach($countryArray['provinces'] as $provinceId=>$provinceArray){ 
      $output.="<li id='$provinceId'>"; 
      $output.="<h2>".$provinceArray['data']['provinceName']."</h2>"; 
      $output.="</li>"; 
     } 
     $output.="</ul>"; 
    $output.="</li>"; 
} 

Answer 2

var Countries = [{...}, {...}, ...]; 
var Provinces = [{...}, {...}, ...]; 
var Cities = [{...}, {...}, ...]; 
var Suburbies = [{...}, {...}, ...]; 

var countriesUl = document.createElement('ul'); 
for (var i in Countries) { 
    var countryLi = document.createElement('li').appendTo(countriesUl); 
    document.createTextNode(Countries[i].Country).appendTo(countryLi); 
    var provincesUl = document.createElement('ul').appendTo(countryLi); 
    for (var j in Provinces) { 
     if (Provinces[j].CountryID != Countries[i].CountryID) continue; 
     var provinceLi = document.createElement('li').appendTo(provincesUl); 
     document.createTextNode('<h3>' + Provinces[j].Provincename + '</h3>').appendTo(provinceLi); 
     document.createTextNode('<p>' + Provinces[j].Provincename + ' province</p>').appendTo(provinceLi); 
     var citiesUl = document.createElement('ul').appendTo(provinceLi); 
     for (var k in Cities) { 
      if (Cities[k].ProvinceID != Provinces[j].ProvinceID) continue; 
      var cityLi = document.createElement('li').appendTo(citiesUl); 
      document.createTextNode(Cities[k].CityName).appendTo(cityLi); 
      var suburbiesUl = document.createElement('ul').appendTo(cityLi); 
      for (var l in Suburbies) { 
       if (Suburbies[l].CityID != Cities[k].CityID) continue; 
       var suburbLi = document.createElement('li').appendTo(suburbiesUl); 
       document.createTextNode(Suburbies[l].SuburbName).appendTo(suburbLi); 
      } 
     } 
    } 
} 

// do whatever you want with countriesUl 
countriesUl.appendTo(document.body);