AngularJS directive demo

About

JSON Formatter is an AngularJS directive for rendering JSON objects in HTML with a collapsible navigation.

How to use

Install via Bower

bower install json-formatter --save

Add jsonFormatter to your app dependencies

          angular
          .module('jsonFormatterApp', [
          'ngCookies',
          ...
          'jsonFormatter'
          ])

Use <json-formatter> directive

          <json-formatter open="1" json="{my: 'json'}"></json-formatter>

open attribute accepts a number that indicated how many levels JSON should be open

Demo

Examples

Null

Undefined

Number

String

Date String

URL String

Function

Empty object

Empty array

Object with one key

Nested Object

Array

Complex Object

Object with long key

Dates

Long String content

HTML content

Opened 1 level

Opened 2 level

Opened 3 level

Opened 4 level

Custom constructors

Dark theme

To use dark theme add json-formatter-dark class this directive. Note that json-formatter-dark class make text and other elements lighter so they look good on a dark background.

Altering JSON object

Alternate json

<json-formatter>