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>

我以为我应该做类似警报的事情（data [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：

    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>';
    }

这里不需要jQuery。如果您需要有关该代码的更多信息，请告诉我。

如何从嵌套对象构建HTML？

2 个答案: