1

I have some data stored in JSON format. I would like to be able to display it in a browser as a dynamic tree structure in a similar way MongoVUE presents the mondodb documents: Screenshot

I have found a very nice jquery plugin, called jsTree. Unfortunately, in order to process JSON documents it requires data to have a very specific verbose (and redundant, in my opinion) structure: link. Using it means significant modifications of my json documents. I am rather searching for a tool that is able to build the tree automagically, without making severe manual adjustments to the data, yet allowing me to potentially apply some modifications to the view, if I would need to.

The tool at json.bloople.net makes something similar using a table, but because I have several levels of nested documents, the output looks very bloated. Moreover, the structure is not dynamically collapsible.

I would appreciate any hints regarding the right tools to do the job, including both those that might require (automated!) pre-processing of JSON data in Java/Groovy or pure JavaScript-based solution.

Alex Fedulov
  • 1,442
  • 17
  • 26
  • 2
    If I were you, I'd either 1) write a javascript method to convert your json objects into jstree nodes, or 2) leave the json the way it is and try writing your own solution by creating nested div tags and some jquery effects, I don't think it'd be too difficult, and might be kinda fun, actually ;-) If you provide your json, maybe folks could help get you started. – Upgradingdave Nov 11 '11 at 13:46

1 Answers1

0

This is just a simple example of how you could output a tree like JSON structure in html. http://jsfiddle.net/K2ZQQ/1/ (see here for browser support for white-space). Note that the second parameter to JSON.stringify is a replacer function:

From http://msdn.microsoft.com/en-us/library/ie/cc836459(v=vs.94).aspx

If replacer is a function, JSON.stringify calls the function, passing in the key and value of each member. The return value is used instead of the original value. If the function returns undefined, the member is excluded. The key for the root object is an empty string: "".

So if you need to add any further modifications to the dislpay of your JSON tree the replacer function may be of help.

Justin Bicknell
  • 4,804
  • 18
  • 26