Software Recommendations Stack Exchange is a question and answer site for people seeking specific software recommendations. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question

Just whipped a quick dirty up: fiddle


ul {
    margin-left: 1em;

.json-key {
    font-weight: bold;

.ui-icon {

.childless {


    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>');                   

    visitObj($('#json-viewer'), {
          "Inner Exception":{
             "Message":"Something else",
                 "Inner Exception":{
                "Message":"Another message",
                "Inner Exception":{
                   "Message":"Object reference not set to an instance of an object.",
                   "TargetSite":"System.Web.Mvc.ActionResult Update(Int32, System.String, System.String)",
                      "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":{

$("#json-viewer li").each( function () {
    $(this).click(function (event) {


<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
up vote 2 down vote accepted

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 '14 at 19:11

Your Answer


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.