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