So, is there a VERY simple library that will render JSON objects as trees? I know that this can be done in many ways (such as YUI), but for debug purposes I'd like to simply be able to view a JSON objects I receive from a server as a tree, nothing fancy (but collapsable tree's would be a bonus).

The kind of solution I'm looking for would be something like:

<script source="something.js"/>
<script>
   obj ={"hello":"world"}
   lib.renderJSON("someid",obj);
</script>
...    
<div id="someid"/>

Any ideas?

So, is there a VERY simple library that will render JSON objects as trees? I know that this can be done in many ways (such as YUI), but for debug purposes I'd like to simply be able to view a JSON objects I receive from a server as a tree, nothing fancy (but collapsable tree's would be a bonus).

The kind of solution I'm looking for would be something like:

<script source="something.js"/>
<script>
   obj ={"hello":"world"}
   lib.renderJSON("someid",obj);
</script>
...    
<div id="someid"/>

Any ideas?

• javascript
• json
• treeview

4 Answers 4

check this too: http://jquery.bassistance.de/treeview/demo/async.html

As this thread came up in response to a Google search, thought it might be worth adding in what I found (the other link no longer appears valid in this context, but I could have missed some functionality).

There are a few around, but I did not find one that provided it in a "graphical tree view", rather a simple "text tree view". There were titled as "beautifiers" or "easy read" JSON viewers.

I ended up using: jsonview by yesmeck

Nice and simple, and did the job first time.

use D3 it is very easy to load json data just something like this

         d3.json("flare.json", function(error, flare) {
              flare.x0 = 0;
               flare.y0 = 0
               update(root = flare);
           });

I created a simple JSON viewer. It parses JSON from string by standard JSON.parse() method, and draws json-tree. You can use only jsonTree library in your project and create many json-trees on one html page:

var wrapper = document.getElementById("wrapper");
var data = {
    "firstName": "Jonh",
    "lastName": "Smith",
    "phones": [
        "123-45-67",
        "987-65-43"
    ]
};
var tree = jsonTree.create(data, wrapper);

<link href="libs/jsonTree/jsonTree.css" rel="stylesheet" />
<script src="libs/jsonTree/jsonTree.js"></script>

jsonTree library (part of jsonTreeViewer)