如何從嵌套對象構建HTML？

Question

我使用jQuery調用json webservice，它返回一個多維數組。

的值的上下文中已知的，但不作爲鍵值

Zone, 
    Country, 
     Port Code, 
      Port Name 

JSON返回樣本提供：

{ 
"Europe": 
    { 
      "UK":{"UK1":"Portsmouth"}, 
      "France":{"FR1":"Caen","FR2":"Calais"} 
    }. 
"Americas": 
    { 
     "USA":{"US1":"Portsmouth2"}, 
     "Canada":{"CA1":"Caen2","CA2":"Calais2"}  
    } 
} 

我有返回的JSON對象如下（URL移除），我試圖parseJSON，但由於數據已經是JSON而引發錯誤

$.ajax({ 
    type: "POST", 
    dataType: "json", 
    url: "linktourl", 
    data: "user="+user, 
    success: function (data) { 
     alert(data); 
     console.log(data); 
     $('#loading').html('<h1>Returned Data:</h1>'+data); 
    } 
}); 

我想遍歷數組水平，然後粘到答案嵌套div標籤

<div class="zone"> 
    <h1>Europe</h1> 
    <div class="country"> 
     <h2>UK</h2> 
     <ul class="port"> 
      <li>UK1 : Portsmouth</li> 
     </ul> 
    </div> 
    <div class="country"> 
     <h2>France</h2> 
     <ul class="port"> 
      <li>FR1 : Caen</li> 
      <li>FR2 : Calais</li> 
     </ul> 
    </div> 
</div> 
<div class="zone"> 
    <h1>Americas</h1> 
    <div class="country"> 
     <h2>USA</h2> 
     <ul class="port"> 
      <li>US1 : Portsmouth2</li> 
     </ul> 
    </div> 
    <div class="country"> 
     <h2>Canada</h2> 
     <ul class="port"> 
      <li>CA1 : Caen2</li> 
      <li>CA2 : Calais2</li> 
     </ul> 
    </div> 
</div> 

，我想我應該做類似警報（數據[0]）;但只是說對象

不確定如何使用jQuery的每一個這個。

Answer 1

在JSON中沒有返回數組。 隨着上述JSON樣品，你可以試試下面的代碼

參閱本小提琴http://jsfiddle.net/JS795/

您可以使用下面的代碼

var zoneHtml = ''; 

for(var zoneKey in data) { 
    zoneHtml+='<div class="zone">'; 
    zoneHtml+= ('<h1>'+zoneKey+'</h1>'); 
    var countries = data[zoneKey]; 

    for(var country in countries) { 
     zoneHtml+='<div class="countries">'; 
     zoneHtml+=('<h2>'+country+'</h2>'); 
     var ports = countries[country]; 
     zoneHtml+='<ul class="port">'; 

     for(var port in ports) { 
      zoneHtml+=('<li>'+port+':'+ports[port] +'</li>'); 
     } 

     zoneHtml+='</ul>'; 
     zoneHtml+='</div>'; 
    } 
    zoneHtml+=('</div>'); 
} 

$("#zone").html(zoneHtml); 

Answer 2

下面的代碼輸出所需的HTML：jQuery的每一個在這裏不需要

var content = ''; 
    for(i in data) { 
     var subcontent = ''; 
     for(subi in data[i]) { 
      var subsubcontent = ''; 
      for(subsubi in data[i][subi]) { 
       subsubcontent += '<li>'+subsubi+' : '+data[i][subi][subsubi]+'</li>'; 
      } 
      subcontent += '<div class="country"><h2>'+subi+'</h2><ul class="port">'+subsubcontent+'</ul></div>'; 
     } 
     content += '<div class="zone"><h1>'+i+'</h1>'+subcontent+'</div>'; 
    } 

。讓我知道你是否需要關於該代碼的更多信息。