6

I'm looking for an FOSS Javascript library for rendering JSON with the ability to collapse nested objects.

This will be for rendering in the DOM so browser plugins won't do. Much like http://json.parser.online.fr/beta/

4

Just whipped a quick dirty up: fiddle

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>

Requires the jQuery UI library for the plus/minus sign to display so must have something like this:

This is significantly based on this SO question - I just added the section hiding/showing basically.

3

pretty-json does exactly that and is under the following licence:

I dont think too much about licence

just feel free to do anything you want... :-)

A demo can be seen here.

  • At a quick look I would say this is a better solution for any complicated cases; very simple cases the one I posted may be better due to its simplicity - though the javascript processing cost is now so low compared to most systems that is a very minimal concern really. – Nick Wilde Apr 15 '14 at 19:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.