Rendern Sie JSON mit Komprimierbarkeit

Ich habe gerade schnell schmutzig gemacht: Geige

CSS:

ul {
    margin-left: 1em;
}

.json-key {
    font-weight: bold;
}

.ui-icon {
    float:left;
    margin-right:3px;
}

.childless {
    margin-left:18px;
}

JavaScript:

    function visitObj($container, obj) {
        var $ul = $('<ul>');

        for (var prop in obj) {

            var $li = $('<li>');
            if (typeof obj[prop] === "object") {
                $li.append('<span class="ui-icon ui-icon-plus"></span><span class="ui-icon ui-icon-minus"></span><span class="json-key">' + prop + ': </span>');
                 visitObj($li, obj[prop]);
            } else {
                $li.append('<span class="json-key childless">' + prop + ': </span><span class="json-value">'+obj[prop]+'</span>');                   
            }
            $ul.append($li);
        }
        $container.append($ul);
    }

    visitObj($('#json-viewer'), {
       "Attempted":"EditUser",
       "Exception":{
          "Message":"Something",
          "TargetSite":"somewhere",
          "Inner Exception":{
             "Message":"Something else",
             "TargetSite":"somewhere.core",
                 "Inner Exception":{
                "Message":"Another message",
                "TargetSite":"something.core.subr",
                "Inner Exception":{
                   "Message":"Object reference not set to an instance of an object.",
                   "TargetSite":"System.Web.Mvc.ActionResult Update(Int32, System.String, System.String)",
                   "StackTrace":[
                      "at Application.Controllers.AdminController.Update(Int32 id, String email, String password) in c:\\Docs\\Apps\\Main\\MyBranch\\Source\\Application\\Application\\Controllers\\AdminController.cs:line 123"
                   ],
                   "Inner Exception":{

                   }
                }
             }
          }
       },
       "details":{
          "userEmail":"test@email.com",
          "userId":"25",
          "userRole":"User"
       }
    });
$(".ui-icon-plus").hide();
$("#json-viewer li").each( function () {
    $(this).click(function (event) {
        $(this).children("ul").toggle();
        $(this).children(".ui-icon").toggle();
        event.stopPropagation();
    });
});

html:

<div id="json-viewer"></div>

Erfordert die jQuery-UI-Bibliothek, damit das Plus-/Minuszeichen angezeigt wird, also muss es so aussehen:

Dies basiert maßgeblich auf dieser SO-Frage - ich habe gerade den Abschnitt zum Ausblenden / Anzeigen im Grunde hinzugefügt.

pretty-jsontut genau das und steht unter folgender Lizenz :

Ich denke nicht zu viel über Lizenzen nach

Fühlen Sie sich frei, alles zu tun, was Sie wollen ... :-)

Eine Demo ist hier zu sehen .