/pretty-json

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

Primary LanguagePython

PRETTY JSON

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

Live Demo

This is an live demo

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.