PRETTY JSON

Simple library to render/format a JS obj to an HTML view.
pretty-json-min.js

Live Demo

This is an live demo

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

Dependecies

• Backbone 1.1.2 (code structure)
• Underscore 1.7.0
• JQuery 1.11.1 (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.