Question

我解析JSON的经验相当少，但我正在使用的文档相当大。 JSON对象彼此嵌套，并且键与＆＃34;标题＆＃34;，＆＃34;描述＆＃34;，＆＃34;属性＆＃34;，＆＃34;默认＆＃34;，和＆＃34;键入＆＃34;。属性/对象名称会有所不同，新值可能会超时添加，所以我希望它尽可能灵活。以下是我正在使用的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表格，理想情况下留下数据不适用的空单元格。例如，第一列将具有＆＃34;警报＆＃34;标题及其下面的每个单元格都将为空，直到其所有属性都已解析为具有属性description / type / sub properties /的下一列，并且在没有要包含的数据时，再次在以下列中默认为空值。

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

我从来没有必要使用这种复杂的动态json数据，所以通常很容易将键链接到一起来获取值但是这真的让我通过一个循环并且我生成的输出看起来像200个空单元格字＆＃34; id＆＃34;在它的中间重复10次。

任何建议都有帮助！

Answer 1

也许这可以帮到你？

Convert JSON array to an HTML table in jQuery

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

Answer 2

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

我老老实实地尝试解决你的问题，但我一直在努力解决这个问题，即这个表在3个级别之后看起来很恐怖。我或许会重新考虑您希望如何显示数据。

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

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

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

将动态嵌套JSON解析为HTML表

2 个答案: