Code Monkey home page Code Monkey logo

pretty-json's Introduction

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

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.

pretty-json's People

Contributors

warfares avatar pineli avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.