Take the 2-minute tour ×
Software Recommendations Stack Exchange is a question and answer site for people seeking specific software recommendations. It's 100% free, no registration required.

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/

share|improve this question

2 Answers 2

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.

share|improve this answer

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.

share|improve this answer
    
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 at 19:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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