Create nested list dynamically from JSON object

Question

What I want to achieve is, starting from a JSON object (multilevel) like this (example):

[
    {
        "geometry": {
            "location": {
                "lat": 37.3860517,
                "lng": -122.0838511
            },
            "viewport": {
                "northeast": {
                    "lat": 37.4508789,
                    "lng": -122.0446721
                },
                "southwest": {
                    "lat": 37.3567599,
                    "lng": -122.1178619
                }
            }
        },
        "name": "Mountain View",
        "scope": "GOOGLE",
        "data": {
            "customKey1": "customValue1",
            "customKey2": {
                "customSubKey1": {
                    "customSubSubKey1": "keyvalue"
                }
            },
        },
        "types": [
            "locality",
            "political"
        ]
    }
]

Without knowing the name of the properties or the level (because not all the elements of the object will have the same properties) create a basic nested HTML list like this (where the keys are bold and values are normal).

I've tried some solutions here on SO to create a list from JSON, but those solutions need the name of the properties or know the level of the object, and in my case, this object will be generated dynamically.

Is possible to create an HTML list from an unknown JSON object?

Adam Azad · Accepted Answer · 2016-12-28T19:14:04.550

This is my attempt. Suggestions are welcomed.

function createHTML(json, isArray){
   
   var html = '<ul>';
   for(var key in json){
       if(typeof json[key] == 'object'){
           
           html += '<li>' + (!isArray ? '<strong>'+ key +'</strong>' : '') + '</li>' + createHTML(json[key], (json[key] instanceof Array ? 1 : 0));
       } else {
           html += '<li>'+ json[key] +'</li>';
       }
   }
   return html+'</ul>';

}
  
var jsonData = [
 {
  "geometry": {
   "location": {
    "lat": 37.3860517,
    "lng": -122.0838511
   },
   "viewport": {
    "northeast": {
     "lat": 37.4508789,
     "lng": -122.0446721
    },
    "southwest": {
     "lat": 37.3567599,
     "lng": -122.1178619
    }
   }
  },
  "name": "Mountain View",
  "scope": "GOOGLE",
  "data": {
   "customKey1": "customValue1",
   "customKey2": {
    "customSubKey1": {
     "customSubSubKey1": "keyvalue"
    }
   },
  },
  "types": [
   "locality",
   "political"
  ]
 }
];

document.getElementById('output').innerHTML = createHTML(jsonData, true);

<div id="output"></div>

This is a nice solution, actually works fine! Just needed to add `html += '

Create nested list dynamically from JSON object

1 Answers1

Linked