title: Parse dynamic nested JSON into HTML table
body: <p>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: </p>
  
  <pre><code>{
  "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"
          ]
      }
  }
  </code></pre>
  
  <p>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. </p>
  
  <p><a href="http://hills.ccsf.edu/~jpark41/cnit133/table.html" rel="nofollow">Here is a hardcoded example of what I am trying to achieve</a></p>
  
  <p>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. </p>
  
  <p>Any advice helps!  </p>