4

我正在编写一个数据查看器页面来呈现从服务器作为 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 而不依赖于知道格式。

4

4 回答 4

11

您可以使用 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"
   }
});

有关工作示例，请参阅此 fiddle。

于 2012-11-12T10:27:13.410 回答
3

吹响我自己的号角，您可能可以根据您的需要调整JSON2HTML。源代码位于https://github.com/bloopletech/json2html - 有关解析 JSON 并生成 HTML 的核心，请参见 scripts/parse.js。

于 2012-11-12T10:14:56.910 回答
2

查看Visualizer.json2html.com的源代码，因为它几乎可以可视化你扔给它的任何 json。

这是可视化器对上面的 json 示例所做的屏幕截图。再次，代码都在那里并且成熟的采摘:)

在此处输入图像描述

于 2012-12-28T05:28:35.430 回答
1

您可以使用预先存在的库来自动执行 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]);
        }
    }
}

在这里试试

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

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

于 2012-11-12T11:09:59.893 回答