ng-json-prettifier v0.0.6
ng-json-prettifier
ng-json-prettifier is a directive to customize your json in your web page. It provides much more flexibility than angular's built-in JSON filter as you can add classes to your JSON's keys and values and control the indentation and padding.
It is different from just using " | json". It let's you apply custom markup to keys/values depending upon the value of the key/value.
Install
Via npm
npm install --save ng-json-prettifier
Via bower
bower install --save ng-json-prettifier
Usage
Declare the directive as an element an pass it your arguments:
<pretty-json json='json' replace-key='replaceKey' replace-value='replaceValue' indent-key='4' indent-value='indentValue'></pretty-json>
Attributes
1. Json
Your JSON item
2. replaceKey (optional)
This function vill be called for each key and it must return the HTML which will be used for the key. Both the key and the correspounding value are passed as argument but only the key's HTML must be returned.
Ex:
var replaceKey = function(key, value) {
if (value === 'foo') {
return '<scan class=\'foo_key\'>' + key + '</scan>'
} else {
return '<scan class=\'bar_key\'>' + key + '</scan>'
}
}
3. replaceValue (optional)
Same as replaceKey but for the JSON values:
Ex:
var replaceValue = function(key, value) {
if (key === 'fiz') {
return '<scan class=\'fiz_value\'>' + value + '</scan>'
} else {
return '<scan class=\'buz_value\'>' + value + '</scan>'
}
}
4. IndentKey
Specify the keys indentation
5. IndentValue
Specify the values indentation, i.e. the space between the keys and values
Demo
The repo contains an example, structured as follows:
HTML:
<div ng-app='myApp'>
<div ng-controller='MyController'>
<pretty-json json='json' replace-key='replaceKey' replace-value='replaceValue' indent-key='4' indent-value='indentValue'></pretty-json>
</div>
</div>
JS:
angular.module('myApp', ['pretty.json'])
.controller('MyController', function($scope) {
$scope.json = {
hello: "world",
foo: "bar",
fiz: "buz"
};
$scope.replaceKey = function(k, v) {
return '<scan class=\'key\'>' + k + '</scan>'
}
$scope.replaceValue = function(k, v) {
return '<scan class=\'value\'>' + v + '</scan>'
}
$scope.indentValue = ' ';
})