HTML code to iterate JSON array and populate UI

Question

I am a complete new bee to HTML and i need some help with writing HTML code to populate the JSON array mentioned below in a table format. I know how to iterate the JSON object but not sure on the HTML code. One item per column.

For eg:

--------------------------------------------------------------------------------
                                 |     Created:sss
   Network Name                  |     Address:sss
                                 |     Owner:sss
                                 |     Network Id:sss
--------------------------------------------------------------------------------
                                 |     Created:sss
   Network Name                  |     Address:sss
                                 |     Owner:sss
                                 |     Network Id:sss
--------------------------------------------------------------------------------


JSON array:

{
    "Items": [
        {
            "Created": {
                "N": "1429635086877"
            },
            "NetworkName": {
                "S": "cloud_sensor"
            },
            "Address": {
                "S": " "
            },
            "Owner": {
                "S": "sss"
            },
            "Active": {
                "S": "TRUE"
            },
            "InstanceID": {
                "S": " "
            },
            "NetworkID": {
                "S": "1234"
            },
            "Status": {
                "S": "CREATING"
            },
            "QueueID": {
                "S": "sss"
            }
        },
        {
            "Created": {
                "N": "sss"
            },
            "NetworkName": {
                "S": "cloud_sensor"
            },
            "Address": {
                "S": " "
            },
            "Owner": {
                "S": "ss"
            },
            "Active": {
                "S": "TRUE"
            },
            "InstanceID": {
                "S": " "
            },
            "NetworkID": {
                "S": "123"
            },
            "Status": {
                "S": "CREATING"
            },
            "QueueID": {
                "S": "ss"
            }
        }
    ]
}

Answer 1

basically you want to build the html from jQuery or javascript:

heres a fiddle

you just want to create a box that keeps repeating with the same structure, something like below. See the fiddle for more details

<div class='container'>
 <div class='inner'></div>
 <div class='inner'></div>
</div>

jquery

$(document).ready(function() {
    for(var i = 0; i < 10; i++) {
        var beginContainer = '<div class="container">';
        var endDiv = '</div>';
        var beginInner = '<div class="inner">';
        var text = '<div class="text">';
        var append = 
         beginContainer 
         + beginInner 
          + text + 'left' + endDiv 
         + endDiv 
         + beginInner 
          + text + 'right' + endDiv 
          + text + 'right' + endDiv 
          + text + 'right' + endDiv 
          + text + 'right' + endDiv 
          + endDiv
         + endDiv;
        $('#content').append(append);
    }
});

Answer 2

here is a fiddle but with using tables

$.each(data.Items,function(i,item){
var tr = "";
tr += "<tr><td>"+item.NetworkName.S+"</td><td><p>"+ item.Created.N+"</p><p>"+item.NetworkID.S+"</p></td></tr>"
console.log(item.NetworkName.S)

$('#output').append(tr); })