在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对象是从审计日志的"详细信息"字段生成的,因此将来可能会记录其他事件,其详细信息格式与我现在预测的任何格式不同,这就是为什么我要处理任意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"
   }
});

对于一个工作示例,请看这个小提琴.