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

Question

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

我选择分两部分来实现

1. 使用微调器渲染没有页面列表的页面。

2. 页面加载后，我将进行 AJAX 调用以将页面列表检索为 JSON

3. 我使用 jQuery 作为我的 javascript 库

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

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

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

哪一个更好？

我的 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"
        }
    ]
}

谢谢阅读！！！

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这样的模板引擎