將json對象轉換爲HTML的最佳解決方案

我的HTML頁面主要顯示從服務器檢索的頁面列表。將json對象轉換爲HTML的最佳解決方案

我選擇來實現，這是兩個部分

渲染頁面，而不與紡紗頁面列表。
加載頁面時我正在一個AJAX調用來檢索頁面列表作爲JSON
我使用jQuery作爲我的JavaScript庫後

我得到的JSON在AJAX其中我需要轉換成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" 
     } 
    ] 
}

感謝您閱讀！

來源

2014-01-21 linux developer

？ JSON是否包含一個簡單包含HTML的字符串列表？ –

給出了示例數據。不，我不得不從數據中構建HTML。 json沒有提及HTML標籤。這個值必須進行評估，以構建相應的HTML –

我喜歡小鬍子將json轉換爲使用特殊html而不是dom操作的自定義html，即使使用jQuery的幫助也是醜陋的... – dandavis

術語「最優解」是有偏見的。什麼是一個很好的解決方案：使用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（數據）可以幫助你瞭解在JavaScript中返回的對象的結構。打開瀏覽器的JavaScript控制檯來查看內容。

當事情越來越複雜，你不只是想簡單的行添加到一個表，考慮您可以發佈一個例子JSON響應使用模板引擎就像mustache.js

來源

2014-01-21 20:07:20

您可以通過迭代每個元素並使用字符串連接（如您所述）在JavaScript中將其構建爲一個字符串。

您也可以使用輕量級JavaScript模板系統來獲得更清晰的代碼。我建議使用mustache.js。

無論哪種方式，最終你會使用像jQuery's .html()這樣的東西插入到實際頁面中。

來源

2014-01-21 20:03:39 mtaube

將json對象轉換爲HTML的最佳解決方案

回答

相關問題