如何从嵌套对象构建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>'; 
    } 

。让我知道你是否需要关于该代码的更多信息。