How to build HTML from a nested object?

Question

I'm calling a json webservice with jQuery and it returns a multi-dimension array.

The context of the values are known but not provided as key values

Zone,
    Country,
        Port Code,
            Port Name

JSON return sample:

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

I have the returned JSON object as follows (url removed), I tried parseJSON but that throws errors as the data is already 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);
    }
});

I want to loop through the array levels and then stick the answer into nested div tags

<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>

I thought I should be to do something like alert(data[0]); but that just says object

Not sure on how to use jQuery each for this.

Have you tried for ( ii in data ) { console.log(data[ii]); }? — bloodyKnuckles
– bloodyKnuckles, Commented Jun 20, 2014 at 11:27

khagesh · Accepted Answer · 2014-06-20 12:25:25Z

2

There is no array returned in JSON. With above JSON sample you can try below code

refer to this fiddle http://jsfiddle.net/JS795/

You can use below code

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);

answered Jun 20, 2014 at 12:25

khagesh

9581 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Trevor Over a year ago

if "UK":{"UK1":"Portsmouth"}, contains additional sub array e.g. "UK":{"UK1":["Portsmouth","Y","Bob","1234"]}, how would you get that information? would that be another for loop on the port variable, btw thanks for your very readable help

khagesh Over a year ago

yes, that will be additional standard for loop with one counter on ports[port]

Adrien LUCAS · Accepted Answer · 2014-06-20 12:33:34Z

0

The following code output the desired 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's each is not needed here. Let me know if you need more informations on that code.

edited Jun 20, 2014 at 12:33

answered Jun 20, 2014 at 11:42

Adrien LUCAS

1571 silver badge4 bronze badges

3 Comments

Trevor Over a year ago

thanks for your help, have discovered that I have a few more nested layers to dig through

Trevor Over a year ago

whats the best way to dump for reading the object data? in php I'd use print_r or var_dump but I'm not sure for javascript

khagesh Over a year ago

console.log(JSON.stringify(json_object))

Collectives™ on Stack Overflow

How to build HTML from a nested object?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related