Render arbitrary JSON in HTML

Question

I\'m writing a data viewer page to render objects being sent as JSON from the server. The JSON objects vary in content and complexity, from flat objects with a handful of at

Answer 1

You can use something like a BFS algorithm. Here's an quick example (depends on jQuery):

css

ul {
    margin-left: 1em;
}

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

​ html

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

javascript

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

    for (var prop in obj) {

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

So calling this with your example:

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"
   }
});

For a working example, see this fiddle.

Answer 2

Check out the source code for visualizer.json2html.com as it pretty much will visualize any json you throw at it.

Here is a screenshot of what the visualizer was able to do with your json sample above .. again the code is all there and ripe for the picking :)

Answer 3

You can use pre-existing libraries which do JSON to HTML rendering and conversion automatically. But if you want to do more personalized things after reading/rendering the JSON, you can very well rely on plain old JavaScript (after all, all the .js libraries are written using plain old JS)

Basically, you need to render the JSON and extract data out of it. Once you have the data you want, you can convert it to whichever format you want. What you need to do is, perform a check on the type of object and if it is a primitive data type, extract the data, and if not, perform a recursive call until you find primitive data type.

The code snippet for this is :

function renderJson(jsonObject){   
    for(var objType in jsonObject){
        if(typeof jsonObject[objType] === 'object'){
            renderJson(jsonObject[objType]);
        }
        else{
            alert(' name=' + objType + ' value=' + jsonObject[objType]);
        }
    }
}

Try here

This is a very basic code snippet. You can modify this snippet to suit your needs.

Refer http://www.json.org/js.html for more details on how you can play around with JSON objects and arrays using JS.

Answer 4

Tooting my own horn, you could probably adapt JSON2HTML to your needs. The source is at https://github.com/bloopletech/json2html - see scripts/parse.js for the core that parses the JSON and generates the HTML.