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('myApp', ['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

Configuration

You can set following configurations via JSONFormatterConfig provider.

Changing these configurations will impact all demos

hoverPreviewEnabled
hoverPreviewArrayCount
hoverPreviewFieldCount

Demo

Live JSON

Other 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

Object with empty key

Dates

Long String content

HTML content

Opened 1 level

Opened 2 level

Opened 3 level

Opened 4 level

Custom constructors

`ng-repeat`

If you are iterating in an array of objects, make sure you are using track by $index to avoid adding extra $$hashKey to your objects.

With `track by $index`

Without `track by $index`

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

Giant JSON

(for performance testing)

<json-formatter>