ngJsonPrettifier

A JSON filter different from just using " | json": it let's you apply custom markup to keys/values depending upon the value of the key/value.
1 person uses it
Author: 3715491?v=3 arnauddri

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:

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:

3. replaceValue (optional)

Same as replaceKey but for the JSON values:

Ex:

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: 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: ```javascript angular.module('myApp', ['pretty.json']) .controller('MyController', function($scope) { $scope.json = { hello: "world", foo: "bar", fiz: "buz" };

comments powered by Disqus
This page was last updated over 2 years ago.