将动态嵌套 JSON 解析为 HTML 表

Posted 2023-05-08

【中文标题】将动态嵌套 JSON 解析为 HTML 表

【英文标题】：Parse dynamic nested JSON into HTML table

【发布时间】：2015-05-21 19:32:58

【问题描述】：

我在解析 JSON 方面的经验相当少，但我使用的文档却很大。 JSON 对象相互嵌套，键与“title”、“description”、“properties”、“default”和“type”相当一致。属性/对象名称会有所不同，并且可能会超时添加新值，因此我希望它尽可能灵活。 这是我正在使用的 JSON 示例，实际文档要大得多：

"title": "settings schema",
"description": "Settings schema ",
"type": "object",
"properties": 
    "alerts": 
        "description": "Settings for alerts ",
        "type": "object",
        "properties": 
            "pageSize": 
                "description": "The number of alerts .",
                "type": "number",
                "default": 15
            ,
            "paramKeys": 
                "description": "parameter keys",
                "type": "string",
                "default": "fromKey,toKey,inKey,outKey"
            ,
            "alertsEnabled": 
                "description": "Enable/disable alerts",
                "type": "boolean",
                "default": true
            ,
            "actionablesEnabled": 
                "description": "Enable/disable actionable alerts",
                "type": "boolean",
                "default": true
            ,
            "HistoryEnabled": 
                "description": "Enable/disable alert history",
                "type": "boolean",
                "default": true
            ,
            "generalAlertsEnabled": 
                "description": "Enable/disable general alerts",
                "type": "boolean",
                "default": true
            ,
            "accountsEnabled": 
                "description": "Enable/disable account alerts",
                "type": "boolean",
                "default": true
            ,
            "alertPrefsEnabled": 
                "description": "Enable/disable alert preferences",
                "type": "boolean",
                "default": true
            ,
            "datePicker": 
                "description": "Search date picker settings",
                "type": "object",
                "properties": 
                    "maxSearchDays": 
                        "description": "The maximum days to search before today's date. Used on search page",
                        "type": "integer",
                        "default": 365
                    ,
                    "minDays": 
                        "description": "The number of days before a user is able to select a date. Should be less than the maxDays",
                        "type": "integer",
                        "default": 0
                    ,
                    "maxDays": 
                        "description": "The total number of days that user is able to select a date until. Should be greater than minDays",
                        "type": "integer",
                        "default": 30
                    ,
                    "blackOutDays": 
                        "description": "Days of the week indicated by 0 (Sunday) though 6 (Saturday) that will be blacked out",
                        "type": "array",
                        "default": []
                    ,
                    "blackOutDates": 
                        "description": "Date Ranges or individual dates in the following format: ['20 Mar 2014 - 1 May 2014', '28 Apr 2014'] that are blacked out or unselectable on the calendar. Typically holidays. ",
                        "type": "array",
                        "default": []
                    ,
                    "isAlertCalendar": 
                        "description": "Configures datepicker to work for alerts dnd ",
                        "type": "boolean",
                        "default": true
                    
                ,
                "required": [
                    "maxSearchDays",
                    "minDays",
                    "maxDays",
                    "blackOutDays",
                    "blackOutDates",
                    "isAlertCalendar"
                ]
            
        ,
        "required": [
            "pageSize",
            "paramKeys"
        ]
    

我在网上看到很多地方都说要遍历数组，但似乎我处理的嵌套对象比数组多。值/属性名称可能会更改，因此我无法真正对任何属性名称进行硬编码。我正在尝试提取这些数据并将其解析回 html 表格，理想情况下留下不适用数据的空单元格。例如，第一列将具有“警报”标题，并且它下面的每个单元格都将为空，直到其所有属性都被解析到具有属性描述/类型/子属性/的下一列中，并且以下列中的默认值再次留空没有要包含的数据时的值。

Here is a hardcoded example of what I am trying to achieve

我以前从来没有处理过如此复杂的动态 json 数据，所以通常它就像将键链接在一起以获得值一样简单，但这真的让我陷入了一个循环，我产生的输出看起来像 200 个空单元格单词“id”在中间重复了 10 次。

任何建议都有帮助！

【问题讨论】：

这是对象文字 - 不是 json - 你不能在 JSON 中包含 JSON，整个结构基本上是一个嵌套了更多对象的 JSON

【参考方案1】：

您需要知道您的结构有多深才能渲染 x 数量 子属性列数（其中 x 是级别数） 在解析对象时，您需要知道该对象所在的级别，以便您可以在该行中添加与该对象对应的列。 使用递归。既然您知道要处理的类型，您只需使用类型对象递归属性。

老实说，我曾尝试解决您的问题，但我一直遇到的问题是这张桌子在 3 级以上之后看起来会很可怕。我可能会重新考虑您希望如何显示数据。

如果这是某种练习（即您必须使用表格），我会研究一个 js 模板渲染引擎，它可以帮助您渲染 x 列。即像下划线这样的东西会让你这样做：

<tr>
  <% for(var i = 0; i < totalNumberOfLevels; i --)  %>
    <td></td>
  <% ; %>

  <td><%- default %></td>
</tr>

【讨论】：

我从你所说的事情中得到了启示。我有级别计数器、一组列数和取决于相关键值的标志。这是我最终得到的github.com/JohnPark86/settings-schema/blob/master/tableGen.html 的链接，我相信还有很多改进的空间，但它现在有效。谢谢指点。

【参考方案2】：

也许这对你有帮助？

Convert JSON array to an HTML table in jQuery

（在下载页面也列出了一个支持子网格创建的模块） http://www.trirand.com/blog/?page_id=6