javascript - 在 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"
   }
});

有关工作示例，请参阅 this fiddle .