PRETTY JSON

Simple library to render/format a JS obj to an HTML view.

Live Demo

..you could get more valid json input from here (http://json.org/example.html)

Dependecies

Backbone (just code structure) / Underscore
JQuery (DOM manipulation)

Usage

//obj to render.
var obj = {
  name:'John Doe',
  age: 20,
  children:[{name:'Jack', age:5}, {name:'Ann', age:8}],
  wife:{name:'Jane Doe', age:28 }
}

var node = new PrettyJSON.view.Node({
  el:$('#elem'),
  data:obj
});

Properties.

el: DOM elem to append the JSON-HTML view.
data: the JSON data.
dateFormat: (optional) format date, ex: "DD/MM/YYYY HH24:MI:SS".

YYYY : year
YY : year
MM : month
DD : day
HH24 : hour 24-format
HH : hours
MI : minutes
SS : seconds

Methods

Node
expandAll: recursive open & render all nodes. (lazy render: the node will render only if it's expanded)
collapseAll: close (Hide) all nodes.

Events

Node
collapse: trigger when a node is show or hide. (event)
mouseover: trigger when mouse over a node. (path)
mouseout: trigger when mouse out the node (event)

Note: "node" is an Obj or an Array.
Note : only tested in Chrome & FireFox.