jQuery + 从 json 创建表

Question

我有一个 JSON 文件

{
  "Scenario"    : "ModelNameHere",
  "id"          : "1",
  "description" : "Description of table model goes here",
  "headers"     : {
     "Column 1 header" : {
       "order"      : 1,
       "items"      : {
         "Row 1 Col 1 value" : {
           "id"         : 1,
           "comment"    : "Comment on Row 1 Col 1",
           "order"      : 1
         },
         "Row 2 Col 2 value" : {
           "id"         : 2,
           "comment"    : "Comment on Row 2 Col 2",
           "order"      : 2
         }
       }  
     },
     "Column 2 header" : {
       "order"      : 2,
       "items"      : {
         "Row 1 Col 2 value" : {
           "id"         : 3,
           "comment"    : "Comment on Row 1 Col 2",
           "order"      : 1
         },
             "Row 2 Col 2 value" : {
           "id"         : 4,
           "comment"    : "Comment on Row 2 Col 2",
           "order"      : 2
         }
       }  
     }
  }
}

我想使用 jQuery 将 JSON 数据放入 HTML 表格中。

标题应该放在 TH td 项目中，标题中的项目应该是每个相关行的 TD 中的元素。

在 JS 或 jQuery 中是否有使用 JSON 数据填充表格的函数？

如何循环遍历 JSON 元素并将其与表格元素匹配？

谢谢。

Answer 1

不，没有这样的功能，因为它是一个真正的情境特定功能。

虽然写起来很容易。
您可以将 JSON 作为普通 JS 对象访问。
这意味着您可以循环遍历它并将信息放在正确的位置。

Answer 2

This question 探索了各种模板引擎，它们可以帮助您实现您想要实现的目标。您仍然需要为表格定义模板，但填充它会非常容易。

Answer 3

看看这个插件。有很多 jQuery 插件，所以选择一个适合你的。 http://www.datatables.net 这是来自 json 的示例，除了它是从 txt 文件加载的，但这不是问题。 http://www.datatables.net/examples/data_sources/ajax.html

以下是我建议您重组 json 的方法。老实说，您应该在这里考虑表格而不是对象。

{
    "model" : "Model name here",
    "id" : 1,
    "description" : "Description of table model goes here",
    "headers" : {
        "header" : {
            "id" : 1,
            "order" : 1,
            "name" : "Col 1 header name" 
        },
        "header" : {
            "id" : 2,
            "order" : 3,
            "name" : "Col 2 header name" 
        } 
    },
    "row1" : {
        "item" : {
            "id" : 1,
            "name" : "Some td data comes here" 
        },
        "item2" : {
                "id" : 4,
            "name" : "Some td data comes here" 
        } 
    },
    "row2" : {
        "item" : {
            "id" : 2,
            "name" : "Some td data comes here" 
        },
        "item2" : {
            "id" : 3,
            "name" : "Some td data comes here" 
        } 
    } 
}

Answer 4

如果您使用 PHP，请使用 json_decode('jsonstring',true); 它将以数组的形式出现并轻松操作数组以创建 html