JSON Formatter is an AngularJS directive for rendering JSON objects in HTML with a collapsible navigation.
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 openedYou can use JSONFormatterConfig
provider to configure JOSN Formatter.
Available configurations
hoverPreviewEnabled
: enable preview on hoverhoverPreviewArrayCount
: 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;
});
See Examples here
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.
All modern browsers are supported. Lowest supported version of Internet Explorer is IE9.
Apache 2.0
See LICENSE