将JSON对象转换为HTML的最佳解决方案

Question

我的HTML页面主要显示从服务器检索到的页面列表。

我选择将其分为两部分实现：

1. 带有spinner的渲染页面，没有页面列表。 2. 在页面加载后，我使用AJAX调用将页面列表作为JSON检索。 3. 我使用jQuery作为我的JavaScript库。

我通过AJAX获取JSON，需要将其转换为HTML并相应地显示在页面中。

我以前没有做过类似的翻译，所以我想知道将JSON转换为HTML的最佳方法是什么。

我做了一些研究。我可以看到使用一些库或迭代每个元素并构建divs。

哪个更好？

我的JSON示例将如下所示：

{
    "SomeID": 12345,
    "someName": "somefile",
    "totalPageNum": 5,
    "pages": [ //Array of pages
        {
            "pageFields": [ // Array of page fields
                {
                    "field": {
                        "id": 1,
                        "type": "someType",
                        "name": "someFieldName",
                        "value": "Some Field Value"
                    },
                    "coordinates": {
                        "x": 105,
                        "y": 543
                    }
                }
            ],
            "somePagenumber": "1",
            "somePageURLurl": "/location/to/page1"
        }
    ]
}

感谢阅读！！！

- linux developer

---

你能发布一个JSON响应的示例吗？JSON是否包含简单包含HTML的字符串列表？ - David Fleeman

根据示例数据，现在我必须从数据中构建HTML。JSON没有参考HTML标签。必须评估该值以相应地构建HTML。 - linux developer

我喜欢Mustache，它可以使用特殊的HTML将JSON转换为自定义HTML，而不是使用DOM操作，即使有jQuery的帮助，这也很丑陋... - dandavis

Answer 1

术语“最优解”是有偏见的。 确切的好解决方案：使用JQuery来实现。

例子：

<!-- Include JQuery, only one time in the page header -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
$.getJSON("/admin/json/endpoint",function(data) {         
  $.each(data.collection, function(i,e) {
  var lmod = formatDate(new Date(e["lmodified"]));
  var row = "<tr><td>"+e["name"]+"</td><td>"+lmod+"</td>"
  $("#dpub tr:first").after(row);
  });
});
</script>

<table id="dpub" style="width:100%;">
 <tr>
   <th style="width:20%;">Name</th>
   <th>Last modified</th>
 </tr>
</table>

请查看：http://api.jquery.com/jquery.getjson/ console.log(data) 可以帮助您了解javascript中返回对象的结构。打开浏览器的Javascript控制台以查看内容。

当事情变得复杂，并且您不只想向表中添加简单行时，请考虑使用模板引擎，例如mustache.js。

- Martin K.

Answer 2

你可以通过遍历每个元素并使用字符串连接（如你所提到的）来在 JavaScript 中构建 HTML 字符串。

你还可以使用轻量级的 JavaScript 模板系统来编写更清晰的代码。我推荐使用 mustache.js。

无论哪种方式，最终你需要使用类似于 jQuery 的 .html() 的东西插入实际页面中。

- bogeylicious