Parse json structure with javascript

Question

Im using ajax to query a json api. It gives me a Tree like structure, which I'd like to visualize. A sample response looks like

{
 "nicos": {
 "_lastconfig_": {
 "poller": {
 "alwayspoll": [], 
 "blacklist": [], 
 "neverpoll": [
 "detector"
 ]
 }
 }, 
 "poller": {
 "alwayspoll": [], 
 "autosetup": true, 
 "blacklist": [], 
 "description": "", 
 "loglevel": "info", 
 "lowlevel": false, 
 "neverpoll": [
 "detector"
 ], 
 "poll": []
 }
 }
}

Now I'd like to parse this dynamically and visualize it as tables. A possible output could be

<h1>nicos</h1>
<h2>_last_config_</h2>
<table>
 <tr><td>alwayspoll</td><td>[]</td></tr>
 <tr><td>blacklist</td><td>[]</td></tr>
 <tr><td>neverpoll</td><td>[detector]</td></tr>
</table>
<h2>poller</h2>
<table>
 <tr><td>alwayspoll</td><td>[]</td></tr>
 <tr><td>autosetup</td><td>true</td></tr>
 <tr><td>blacklist</td><td>[]</td></tr>
 <tr><td>description</td><td></td></tr>
 <tr><td>loglevel</td><td>info</td></tr>
 <tr><td>lowlevel</td><td>false</td></tr>
 <tr><td>neverpoll</td><td>[detector]</td></tr>
 <tr><td>poll</td><td>[]</td></tr>
</table>

Since I'm a complete novice in javascript I'm asking for some advice on how I could achive that. The ajax part is not the problem, but the parsing bothers me.

• Amberlamps: The AJAX part is not a problem, but this gives you headaches? Strange!
• epascarello: And it is good practice to use tbody/thead.
• Paul S.: You should consider using <ul> though, as it is more of a list than tabular.
• epascarello: @PaulS. More like a <dl>
• user1585455: @P3trus Tables are deprecated and shouldn't be used if it can be helped. You can read more about <dl> and the new and awesome HTML5 here: html5doctor.com/the-dl-element

Answer 1

Try this code:

function parse(obj){
 var s = '<table>';
 for(var k in obj){
 if(typeof obj[k] === 'object'){
 s += '<tr><td>'+k+'</td><td>'+parse(obj[k])+'</td></tr>\n';
 }else{
 s += '<tr><td>'+k+'</td><td>'+obj[k]+'</td></tr>\n';
 }
 }
 return s + '</table>\n';
}
parse(myJson);

Output:

 <table>
 <tr><td>nicos</td><td>
 <table>
 <tr><td>_lastconfig_</td><td>
 <table>
 <tr><td>poller</td><td>
 <table>
 <tr><td>alwayspoll</td><td>
 <table>
 <tr><td>0</td><td>1</td></tr>
 <tr><td>1</td><td>2</td></tr>
 <tr><td>2</td><td>3</td></tr>
 </table>
 </td></tr>
 <tr><td>blacklist</td><td>
 <table>
 <tr><td>0</td><td>X</td></tr>
 <tr><td>1</td><td>Y</td></tr>
 <tr><td>2</td><td>Z</td></tr>
 </table>
 </td></tr>
 <tr><td>neverpoll</td><td>
 <table>
 <tr><td>0</td><td>detector</td></tr>
 </table>
 </td></tr>
 </table>
 </td></tr>
 </table>
 </td></tr>
 <tr><td>poller</td><td>
 <table>
 <tr><td>alwayspoll</td><td>
 <table>
 </table>
 </td></tr>
 <tr><td>autosetup</td><td>true</td></tr>
 <tr><td>blacklist</td><td>
 <table>
 </table>
 </td></tr>
 <tr><td>description</td><td></td></tr>
 <tr><td>loglevel</td><td>info</td></tr>
 <tr><td>lowlevel</td><td>false</td></tr>
 <tr><td>neverpoll</td><td>
 <table>
 <tr><td>0</td><td>detector</td></tr>
 </table>
 </td></tr>
 <tr><td>poll</td><td>
 <table>
 </table>
 </td></tr>
 </table>
 </td></tr>
 </table>
 </td></tr>
</table>

(I added some variables to the arrays to show that those work, too)

Answer 2

Parsing an Object to a definition list (<dl>) can be achieved with code such as this (example fiddle).

function objToDefnList(obj) { // returns a `<dl>` node (not appended to DOM Tree)
 var dl = document.createElement('dl'),
 dt, dd, key;
 for (key in obj) {
 if (obj.hasOwnProperty(key)) {
 // title
 dt = document.createElement('dt');
 dt.appendChild(document.createTextNode(key));
 dl.appendChild(dt);
 // defn.
 dd = document.createElement('dd');
 if (typeof obj[key] !== 'object') {
 dd.appendChild(document.createTextNode(obj[key].toString()));
 } else {
 dd.appendChild(objToDefnList(obj[key])); // recurse
 }
 dl.appendChild(dd);
 }
 }
 return dl; // done, return
}

It could very easily be modified to use any kind of list you want (e.g. <ul>, <ol>) or display more information (e.g. typeof obj[key]). You will probably need to style the elements, please see fiddle for an example of that, too.

Thanks to epascarello for suggesting <dl> over <ul>.

• Paul S.: For information on what a key is, it might be more complete to do something like obj[key] && obj[key].constructor && obj[key].constructor.name || obj[key] === null && 'null' || obj[key] === undefined && 'undefined' || typeof obj[key].

Answer 3

JSON to an HTML Table is almost surely a wheel that has been invented:

https://github.com/afshinm/Json-to-HTML-Table