# <json-formatter>

#### 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)