呈現HTML中的任意JSON

Question

我正在編寫一個數據查看器頁面以呈現從服務器以JSON形式發送的對象。 JSON對象的內容和複雜性各不相同，從具有少數屬性的平面對象到具有多層嵌套和陣列字段的較大結構。我想要做的是呈現對象的簡單表示，可能是ul。從那裏我可以添加東西，以允許可點擊展開/摺疊行爲或其他東西。

我知道這將需要遞歸函數，我可以調用頂層，然後將再次調用它發現的每個嵌套級別。我對Javascript的使用並不是很有信心，而且我也不太瞭解它。我也遇到了一個事實，即我不知道屬性名稱 - 不同的對象將具有不同的屬性，名稱不同。

有沒有一種比較簡單的方法來呈現這樣的對象，還是我需要改變服務器發送的JSON格式？編輯： JSON的樣本可能不會有太大的幫助;他們差異很大。就像我說的，有些很簡單，有些很複雜。最簡單的對象是這樣的：

{ 
    "id": "5", 
    "category": "12", 
    "created": "25-Sep-2012" 
} 

而最複雜的一個我目前是這樣的：

{ 
    "Attempted":"EditUser", 
    "Exception":{ 
     "Message":"Something", 
     "TargetSite":"somewhere", 
     "Inner Exception":{ 
     "Message":"Something else", 
     "TargetSite":"somewhere.core", 
      "Inner Exception":{ 
      "Message":"Another message", 
      "TargetSite":"something.core.subr", 
      "Inner Exception":{ 
       "Message":"Object reference not set to an instance of an object.", 
       "TargetSite":"System.Web.Mvc.ActionResult Update(Int32, System.String, System.String)", 
       "StackTrace":[ 
        "at Application.Controllers.AdminController.Update(Int32 id, String email, String password) in c:\\Docs\\Apps\\Main\\MyBranch\\Source\\Application\\Application\\Controllers\\AdminController.cs:line 123" 
       ], 
       "Inner Exception":{ 

       } 
      } 
     } 
     } 
    }, 
    "details":{ 
     "userEmail":"test@email.com", 
     "userId":"25", 
     "userRole":"User" 
    } 
} 

正如你可以看到，這是一個錯誤日誌的JSON表示，包括由軟件引發的異常（敏感細節已被遮蓋）。 JSON對象是從審計日誌的「detail」字段生成的，因此將來可能會記錄其他事件，其細節與我現在預測的任何內容格式不同，這就是爲什麼我要處理任意JSON而沒有依賴於瞭解格式。

Answer 1

你可以使用類似BFS算法的東西。下面是一個簡單的例子（取決於jQuery的）：

CSS

ul { 
    margin-left: 1em; 
} 

.json-key { 
    font-weight: bold; 
} 

HTML

<div id="json-viewer"></div>​ 

的JavaScript

function visitObj($container, obj) { 
    var $ul = $('<ul>'); 

    for (var prop in obj) { 

     var $li = $('<li>'); 
     $li.append('<span class="json-key">' + prop + ': </span>'); 
     if (typeof obj[prop] === "object") { 
      visitObj($li, obj[prop]); 
     } else { 
      $li.append('<span class="json-value">'+obj[prop]+'</span>');     
     } 
     $ul.append($li); 
    } 
    $container.append($ul); 
} 

所以你的榜樣調用此：

visitObj($('#json-viewer'), { 
    "Attempted":"EditUser", 
    "Exception":{ 
     "Message":"Something", 
     "TargetSite":"somewhere", 
     "Inner Exception":{ 
     "Message":"Something else", 
     "TargetSite":"somewhere.core", 
      "Inner Exception":{ 
      "Message":"Another message", 
      "TargetSite":"something.core.subr", 
      "Inner Exception":{ 
       "Message":"Object reference not set to an instance of an object.", 
       "TargetSite":"System.Web.Mvc.ActionResult Update(Int32, System.String, System.String)", 
       "StackTrace":[ 
        "at Application.Controllers.AdminController.Update(Int32 id, String email, String password) in c:\\Docs\\Apps\\Main\\MyBranch\\Source\\Application\\Application\\Controllers\\AdminController.cs:line 123" 
       ], 
       "Inner Exception":{ 

       } 
      } 
     } 
     } 
    }, 
    "details":{ 
     "userEmail":"test@email.com", 
     "userId":"25", 
     "userRole":"User" 
    } 
}); 

有關工作示例，請參見this fiddle。

Answer 2

打開我自己的號角，你可能會適應JSON2HTML您的需求。源代碼位於https://github.com/bloopletech/json2html - 請參閱用於解析JSON並生成HTML的核心的scripts/parse.js。

Answer 3

您可以使用預先存在的庫自動執行JSON到HTML的渲染和轉換。但是如果你想在閱讀/渲染JSON之後做更多個性化的事情，你可以非常依賴普通的舊JavaScript（畢竟所有的.js庫都是用普通的老式JS編寫的）。

基本上，你需要呈現JSON並從中提取數據。一旦你有你想要的數據，你可以將其轉換爲你想要的任何格式。你需要做的是，對對象的類型進行檢查，如果它是基本數據類型，則提取數據，如果不是，則執行遞歸調用，直到找到基本數據類型。

這樣做的代碼片段：

function renderJson(jsonObject){ 
    for(var objType in jsonObject){ 
     if(typeof jsonObject[objType] === 'object'){ 
      renderJson(jsonObject[objType]); 
     } 
     else{ 
      alert(' name=' + objType + ' value=' + jsonObject[objType]); 
     } 
    } 
} 

Try here

這是一個非常基本的代碼片段。您可以修改此片段以滿足您的需求。

請參閱http://www.json.org/js.html瞭解更多關於如何使用JS來玩弄JSON對象和數組的細節。

Answer 4

查看visualizer.json2html.com的源代碼，因爲它幾乎可以直觀地看到你扔在它上面的任何json。

這裏是什麼樣的可視化工具能夠做你的JSON樣品上方..再次代碼全都在那裏採摘:)