JSON->HTML->jsTree

http://kthxbyte.github.io/#08012016-display-json-as-a-jstree

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="jstree-placeholder"></div>

JavaScript

// http://json.org/example.html
var jsondata = 
{
   "glossary": {
      "title": "example glossary",
      "GlossDiv": {
         "title": "S",
         "GlossList": {
            "GlossEntry": {
               "ID": "SGML",
               "SortAs": "SGML",
               "GlossTerm": "Standard Generalized Markup Language",
               "Acronym": "SGML",
               "Abbrev": "ISO 8879:1986",
               "GlossDef": {
                  "para": "A meta-markup language, used to create markup languages such as DocBook.",
                  "GlossSeeAlso": ["GML", "XML"]
               },
               "GlossSee": "markup"
            }
         }
      }
   }
};

function procesar(datos){
    html = "";
    $.each(datos, function(index,item){
        if (item != null && typeof(item) == "object"){
            // Subtree
            html += "<li><code><b>"+ index +"</b></code><ul>"+ 
                    procesar(item) +"</ul></li>";
        } else {
            // Leaf
            html += "<li><code><b>"+ index +": </b>'"+ 
                    item +"'</code></li>";
        }
    });
    return html;
}

$(function(){
    code = "<ul>"+ procesar(jsondata) +"</ul>";
    $("#jstree-placeholder").html( code ).jstree(); 
});