javascript - 用于迭代 JSON 数组并填充 UI 的 HTML 代码

Question

我是 HTML 的新手，我需要一些帮助来编写 HTML 代码以表格格式填充下面提到的 JSON 数组。我知道如何迭代 JSON 对象，但不确定 HTML 代码。每列一项。

例如:

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

基本上你想从 jQuery 或 javascript 构建 html:

heres a fiddle

您只想创建一个具有相同结构的不断重复的框，如下所示。有关更多详细信息，请参阅 fiddle

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