jsonformatter

0.7.0 • Public • Published

JSON Formatter

Build Status Code Climate

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

Screebshot

Now also available in pure JavaScript with zero dependency!

Usage

  • Install via Bower or npm

    bower install json-formatter --save

    ...or

    npm install jsonformatter --save
  • Add jsonFormatter to your app dependencies

    angular.module('MyApp', ['jsonFormatter'])
  • Use <json-formatter> directive

    <json-formatter json="{my: 'json'}" open="1"></json-formatter>
  • 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

app.config(function (JSONFormatterConfigProvider) {
 
  // Enable the hover preview feature
  JSONFormatterConfigProvider.hoverPreviewEnabled = true;
});

Demo

See Examples here

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

Package Sidebar

Install

npm i jsonformatter

Weekly Downloads

4,766

Version

0.7.0

License

Apache-2.0

Unpacked Size

261 kB

Total Files

25

Last publish

Collaborators

  • mohsen