https://github.com/mohsen1/json-formatter

Angular directive for collapsible JSON in HTML
https://github.com/mohsen1/json-formatter

Last synced: 9 days ago
JSON representation

Angular directive for collapsible JSON in HTML

• Host: GitHub
• URL: https://github.com/mohsen1/json-formatter
• Owner: mohsen1
• License: other
• Created: 2014-08-02T07:59:06.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2020-10-17T13:42:18.000Z (about 4 years ago)
• Last Synced: 2024-04-14T14:51:09.257Z (7 months ago)
• Language: JavaScript
• Homepage: http://azimi.me/json-formatter/demo/demo.html
• Size: 1.5 MB
• Stars: 369
• Watchers: 12
• Forks: 86
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-json - JSON Formatter - Angular directive for collapsible JSON in HTML. (AngularJS) (Frontend components)

README

        
# JSON Formatter

[![Build Status](https://travis-ci.org/mohsen1/json-formatter.svg?branch=master)](https://travis-ci.org/mohsen1/json-formatter)

[![Code Climate](https://codeclimate.com/github/mohsen1/json-formatter/badges/gpa.svg)](https://codeclimate.com/github/mohsen1/json-formatter)

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

[![Screebshot](./screenshot.png)](http://azimi.me/json-formatter/demo/demo.html)

#### [Now also available in pure JavaScript with zero dependency!](https://github.com/mohsen1/json-formatter-js)

## Usage

* Install via Bower or npm

  ```bash

  bower install json-formatter --save

  ```

  ...or

  ```bash

  npm install jsonformatter --save

  ```

* Add `jsonFormatter` to your app dependencies

  ```js

  angular.module('MyApp', ['jsonFormatter'])

  ```

* Use `` directive

  ```html

  

  ```

* `open` attribute accepts a number which indicates how many levels rendered JSON should be opened

#### Configuration

You can use `JSONFormatterConfig` provider to configure JOSN Formatter.

Available configurations

##### Hover Preview

* `hoverPreviewEnabled`: enable preview on hover

* `hoverPreviewArrayCount`: number of array items to show in preview Any array larger than this number will be shown as `Array[XXX]` where `XXX` is length of the array.

* `hoverPreviewFieldCount`: number of object properties to show for object preview. Any object with more properties that thin number will be truncated.

Example using configuration

```js

app.config(function (JSONFormatterConfigProvider) {

  // Enable the hover preview feature

  JSONFormatterConfigProvider.hoverPreviewEnabled = true;

});

```

## Demo

See [Examples here](http://azimi.me/json-formatter/demo/demo.html)

## Known Bugs

##### `hashKey`

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

## Browser Support

All modern browsers are supported. Lowest supported version of Internet Explorer is **IE9**.

## License

Apache 2.0

See [LICENSE](./LICENSE)