Parse dynamic nested JSON into HTML table

Question

My experience with parsing JSON is fairly minimal but the document im working with is pretty big. JSON Objects are nested within one another and the keys are fairly consistent with "title","description","properties","default", and "type". Property/Object names will vary and new values may be added overtime so I want this to be as flexible as possible. Here is a sample of the JSON I am working with, The real document is much larger:

{
"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"
        ]
    }
}

Ive seen a lot of places online say to iterate over arrays but it seems like im dealing with more nested Objects than arrays. Value/Property names may change so I cant really hardcode any property names. I am trying to pull this data and parse it back into an HTML table ideally leaving empty cells where data doesn't apply. For example the first column would have the "alerts" title and every cell underneath it would be empty until all of its properties had been parsed into the next column with property description/type/sub properties/ and defaults in the following columns again leaving blank values when there is no data to include.

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

Ive never had to work with such complex dynamic json data before so usually its as easy as chaining together keys to get to values but this i really throwing me through a loop and the output i am producing looks like 200 empty cells with the word "id" repeated 10 times in the middle of it.

Any advice helps!

this is object literal - not a json - and you can't have a JSON within a JSON , the whole structure is basically a JSON with more objects nested — nicholaswmin, May 21 '15 at 19:40

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

Maybe this helps you out?

Convert JSON array to an HTML table in jQuery

(at the download page is also a module listed which supports sub grid creation) http://www.trirand.com/blog/?page_id=6

edited May 23 '17 at 10:26

Community

1
1

answered May 21 '15 at 23:09

Benjamin

1,067
20
30

score 1 · Accepted Answer · answered May 22 '15 at 00:28

You need to know how deep your structure is in order to render x amount
of sub property columns ( where x is the number of levels )
When parsing an object you need to know the level where that object is so that you may add columns to that row corresponding to that object.
use recursion. Since you know what type you're dealing with you only have to recurse down the properties with the type object.

I honestly tried solving your problem but I keep bumping to the problem that this table is going to look horrific after 3+ levels. I would perhaps rethink how you want the data to be displayed.

If this is some sort of exercise ( i.e. you have to use a table ) I would look into a js template rendering engine that would help you render the x columns. i.e. something like underscore would let you do:

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

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

I took a cue from the things you said. I have counters for levels, a set number of columns and flags dependant on relevant key values. Heres a link to what I ended up with https://github.com/JohnPark86/settings-schema/blob/master/tableGen.html Im sure theres tons of room for improvement but it works for now. Thanks for the pointers. — John Park, May 27 '15 at 17:35

Parse dynamic nested JSON into HTML table

2 Answers2