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。

Answer 2

嘟嘟我自己的号角，你可能会根据你的需要调整JSON2HTML。源位于https://github.com/bloopletech/json2html - 请参阅scripts / parse.js以获取解析JSON并生成HTML的核心。

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

这是一个非常基本的代码段。您可以修改此代码段以满足您的需求。

有关如何使用JS来使用JSON对象和数组的详细信息，请参阅http://www.json.org/js.html。

Answer 4

查看visualizer.json2html.com的源代码，因为它几乎可以显示你抛出的任何json。

以下是可视化工具能够对您的json示例进行处理的屏幕截图..再次，代码就在那里，并且已经成熟了：）

enter image description here

在HTML中渲染任意JSON

4 个答案: