├── .gitignore
├── .travis.yml
├── README.md
├── bower.json
├── dist
    ├── ng-json-prettifier.js
    └── ng-json-prettifier.min.js
├── example
    └── index.html
├── javascripts
    └── ng-json-prettifier.min.js
├── karma.conf.js
├── package.json
├── src
    ├── directive.js
    ├── directive.prefix
    └── directive.suffix
└── test
    └── directive.spec.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bower_components
3 | npm-debug.log
4 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - 0.10
 4 | 
 5 | before_script:
 6 |   - export DISPLAY=:99.0
 7 |   - sh -e /etc/init.d/xvfb start
 8 |   - npm install -g bower
 9 |   - bower install
10 | 
11 | script:
12 |   - ./node_modules/karma/bin/karma start --no-auto-watch --single-run --reporters dots --browsers Firefox
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ng-json-prettifier [![Build Status](https://travis-ci.org/arnauddri/ng-json-prettifier.svg?branch=master)](https://travis-ci.org/arnauddri/ng-json-prettifier) 
  2 | 
  3 | 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.
  4 | 
  5 | 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.
  6 | 
  7 | ### Install
  8 | 
  9 | Via npm
 10 | ```
 11 | npm install --save ng-json-prettifier
 12 | ```
 13 | 
 14 | Via bower
 15 | ```
 16 | bower install --save ng-json-prettifier
 17 | ```
 18 | 
 19 | ### Usage
 20 | 
 21 | Declare the directive as an element an pass it your arguments:
 22 | 
 23 | ```html
 24 |   <pretty-json json='json' replace-key='replaceKey' replace-value='replaceValue' indent-key='4' indent-value='indentValue'></pretty-json>
 25 | ```
 26 | 
 27 | #### Attributes
 28 | 
 29 | ##### 1. Json
 30 | 
 31 | Your JSON item
 32 | 
 33 | 
 34 | ##### 2. replaceKey (optional)
 35 | 
 36 | 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.
 37 | 
 38 | Ex:
 39 | 
 40 | ```javascript
 41 |   var replaceKey = function(key, value) {
 42 |     if (value === 'foo') {
 43 |       return '<scan class=\'foo_key\'>' + key + '</scan>'
 44 |     } else {
 45 |       return '<scan class=\'bar_key\'>' + key + '</scan>'
 46 |     }
 47 |   }
 48 | ```
 49 | 
 50 | 
 51 | ##### 3. replaceValue (optional)
 52 | 
 53 | Same as replaceKey but for the JSON values:
 54 | 
 55 | Ex:
 56 | 
 57 | ```javascript
 58 |   var replaceValue = function(key, value) {
 59 |     if (key === 'fiz') {
 60 |       return '<scan class=\'fiz_value\'>' + value + '</scan>'
 61 |     } else {
 62 |       return '<scan class=\'buz_value\'>' + value + '</scan>'
 63 |     }
 64 |   }
 65 | ```
 66 | 
 67 | ##### 4. IndentKey
 68 | 
 69 | Specify the keys indentation
 70 | 
 71 | ##### 5. IndentValue
 72 | 
 73 | Specify the values indentation, i.e. the space between the keys and values
 74 | 
 75 | ### Demo
 76 | 
 77 | The repo contains an example, structured as follows:
 78 | 
 79 | HTML:
 80 | ```html
 81 |   <div ng-app='myApp'>
 82 |     <div ng-controller='MyController'>
 83 |       <pretty-json json='json' replace-key='replaceKey' replace-value='replaceValue' indent-key='4' indent-value='indentValue'></pretty-json>
 84 |     </div>
 85 |   </div>
 86 | ```
 87 | 
 88 | JS:
 89 | ```javascript
 90 |       angular.module('myApp', ['pretty.json'])
 91 |         .controller('MyController', function($scope) {
 92 |           $scope.json = {
 93 |             hello: "world",
 94 |             foo: "bar",
 95 |             fiz: "buz"
 96 |           };
 97 | 
 98 |           $scope.replaceKey = function(k, v) {
 99 |             return '<scan class=\'key\'>' + k + '</scan>'
100 |           }
101 | 
102 |           $scope.replaceValue = function(k, v) {
103 |             return '<scan class=\'value\'>' + v + '</scan>'
104 |           }
105 | 
106 |           $scope.indentValue = ' ';
107 |         })
108 | 
109 | ```
110 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng-json-prettifier",
 3 |   "version": "0.0.5",
 4 |   "homepage": "https://github.com/arnauddri/ng-json-prettifier",
 5 |   "authors": [
 6 |     "Arnaud Drizard <arnaud.drizard@gmail.com>"
 7 |   ],
 8 |   "description": "An Angular directive to prettify your Json items",
 9 |   "main": "dist/ng-json-prettifier.min.js",
10 |   "keywords": [
11 |     "json",
12 |     "prettify",
13 |     "ng-prettify",
14 |     "angular",
15 |     "stringify",
16 |     "angular",
17 |     "angularjs"
18 |   ],
19 |   "license": "MIT",
20 |   "ignore": [
21 |     "**/.*",
22 |     "node_modules",
23 |     "bower_components",
24 |     "test",
25 |     "tests"
26 |   ],
27 |   "dependencies": {
28 |     "angular": "~1.3.8",
29 |     "angular-mocks": "~1.3.9"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/dist/ng-json-prettifier.js:
--------------------------------------------------------------------------------
 1 | if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports === exports){
 2 |   module.exports = 'pretty.json';
 3 | }
 4 | 
 5 | (function (window, angular, undefined) {
 6 | /* global angular:false */
 7 | 'use strict';
 8 | 
 9 | angular.module('pretty.json', [])
10 |   .directive('prettyJson',  ['$compile', function($compile) {
11 |     return {
12 |       restrict: 'E',
13 |       replace: true,
14 |       template: '<pre></pre>',
15 |       scope: {
16 |         json: '=json',
17 |         replaceKey: '=replaceKey',
18 |         replaceValue: '=replaceValue',
19 |         indentValue: '=',
20 |         indentKey: '='
21 |       },
22 |       link: function(scope, element) {
23 |         scope.$watch(
24 |           function() { return scope.json; },
25 |           compileJSON
26 |         )
27 | 
28 |         var replaceKey   = scope.replaceKey || function(key, value) { return key };
29 |         var replaceValue = scope.replaceValue || function(key, value) { return value };
30 |         var indentValue  = scope.indentValue || '    ';
31 |         var indentKey    = scope.indentKey || 10;
32 | 
33 |         function compileJSON(json) {
34 |           if (!json || typeof json !== 'object')
35 |             return;
36 | 
37 |           element.html(JSON.stringify(json, prettifyJSON, indentKey)
38 |             .replace(new RegExp('":', 'g'),'":' + indentValue + ''))
39 | 
40 |           $compile(element.contents())(scope);
41 |         }
42 | 
43 |         function prettifyJSON(key, value) {
44 |           if (value && typeof value === 'object' && !Array.isArray(value)) {
45 |             var replacement = {};
46 |             for (var k in value) {
47 |               if (Object.hasOwnProperty.call(value, k))
48 |                 replacement[replaceKey(k, value[k])] = value[k];
49 |             }
50 |             return replacement
51 |           } else if (Array.isArray(value)) {
52 |             for (var k in value) {
53 |               return value
54 |             }
55 |           }
56 | 
57 |           return replaceValue(key, value);
58 |         }
59 |       }
60 |     }
61 |   }]);
62 | 
63 | })(window, window.angular);
64 | 


--------------------------------------------------------------------------------
/dist/ng-json-prettifier.min.js:
--------------------------------------------------------------------------------
1 | "undefined"!=typeof module&&"undefined"!=typeof exports&&module.exports===exports&&(module.exports="pretty.json"),function(e,r){"use strict";r.module("pretty.json",[]).directive("prettyJson",["$compile",function(e){return{restrict:"E",replace:!0,template:"<pre></pre>",scope:{json:"=json",replaceKey:"=replaceKey",replaceValue:"=replaceValue",indentValue:"=",indentKey:"="},link:function(r,n){function t(t){t&&"object"==typeof t&&(n.html(JSON.stringify(t,o,c).replace(new RegExp('":',"g"),'":'+a)),e(n.contents())(r))}function o(e,r){if(r&&"object"==typeof r&&!Array.isArray(r)){var n={};for(var t in r)Object.hasOwnProperty.call(r,t)&&(n[i(t,r[t])]=r[t]);return n}if(Array.isArray(r))for(var t in r)return r;return u(e,r)}r.$watch(function(){return r.json},t);var i=r.replaceKey||function(e){return e},u=r.replaceValue||function(e,r){return r},a=r.indentValue||"    ",c=r.indentKey||10}}}])}(window,window.angular);


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html id="ng-app">
 3 |   <!-- id="ng-app" IE<8-->
 4 |   <head>
 5 |     <title>Simple example</title>
 6 |     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 7 |     <script src="bower_components/angular/angular.js"></script>
 8 |     <script src="./../dist/ng-json-prettifier.min.js"></script>
 9 |     <style>
10 |       html, body { height: 100%; }
11 |       .key { color: blue }
12 |       .value { color: red }
13 |       pre { width: 400px; margin: 40px auto; }
14 |     </style>
15 |   </head>
16 |   <body ng-app='myApp'>
17 |     <div ng-controller='MyController'>
18 |       <pretty-json json='json' replace-key='replaceKey' replace-value='replaceValue' indent-key='4' indent-value='indentValue'></pretty-json>
19 |     </div>
20 |     <script type="text/javascript" charset="utf-8">
21 |       angular.module('myApp', ['pretty.json'])
22 |         .controller('MyController', function($scope) {
23 |           $scope.json = {
24 |             hello: "world",
25 |             foo: "bar",
26 |             fiz: "buz",
27 |             int: [1,2,3,4,5,6],
28 |             arr: [ {
29 |               bruce: "wayne",
30 |               Peter: "Parker",
31 |               Clark: "Kent"
32 |              }, {
33 |               bruce: "wayne",
34 |               Peter: "Parker",
35 |               Clark: "Kent"
36 |              }
37 |             ]
38 |           };
39 | 
40 |           $scope.replaceKey = function(k, v) {
41 |             return '<scan class=\'key\'>' + k + '</scan>'
42 |           }
43 | 
44 |           $scope.replaceValue = function(k, v) {
45 |             return '<scan class=\'value\'>' + v + '</scan>'
46 |           }
47 | 
48 |           $scope.indentValue = ' ';
49 |         })
50 |     </script>
51 |   </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/javascripts/ng-json-prettifier.min.js:
--------------------------------------------------------------------------------
1 | "undefined"!=typeof module&&"undefined"!=typeof exports&&module.exports===exports&&(module.exports="pretty.json"),function(e,n){"use strict";n.module("pretty.json",[]).directive("prettyJson",["$compile",function(e){return{restrict:"E",replace:!0,template:"<pre></pre>",scope:{json:"=json",replaceKey:"=replaceKey",replaceValue:"=replaceValue",indentValue:"=",indentKey:"="},link:function(n,t){function r(r){r&&"object"==typeof r&&(t.html(JSON.stringify(r,o,p).replace(new RegExp('":',"g"),'":'+i)),e(t.contents())(n))}function o(e,n){if(n&&"object"==typeof n){var t={};for(var r in n)Object.hasOwnProperty.call(n,r)&&(t[c(r,n[r])]=n[r]);return t}return u(e,n)}n.$watch(function(){return n.json},r);var c=n.replaceKey||function(e){return e},u=n.replaceValue||function(e,n){return n},i=n.indentValue||"    ",p=n.indentKey||10}}}])}(window,window.angular);
2 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(config) {
 2 |   config.set({
 3 |     basePath: '',
 4 | 
 5 |     frameworks: ['jasmine'],
 6 | 
 7 |     // list of files / patterns to load in the browser
 8 |     files: [
 9 |       // libraries
10 |       'bower_components/angular/angular.js',
11 |       'bower_components/angular-mocks/angular-mocks.js',
12 | 
13 |       // our app
14 |       'dist/ng-json-prettifier.js',
15 | 
16 |       // tests
17 |       'test/*.js',
18 |     ],
19 | 
20 |     autoWatch: true,
21 | 
22 |     browsers: ['Chrome']
23 |   });
24 | };
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng-json-prettifier",
 3 |   "version": "0.0.6",
 4 |   "description": "An Angular directive to prettify your Json items",
 5 |   "main": "dist/ng-json-prettifier.min.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/arnauddri/ng-json-prettifier"
 9 |   },
10 |   "scripts": {
11 |     "test": "./node_modules/karma/bin/karma start --single-run --no-auto-watch",
12 |     "minify": "uglifyjs --lint false -mc -o dist/ng-json-prettifier.min.js dist/ng-json-prettifier.js",
13 |     "cat": "cat src/directive.prefix src/directive.js src/directive.suffix > dist/ng-json-prettifier.js",
14 |     "build": "npm run cat && npm run minify"
15 |   },
16 |   "keywords": [
17 |     "json",
18 |     "prettify",
19 |     "pretty",
20 |     "ng-prettify",
21 |     "beautifier",
22 |     "uglifyjs",
23 |     "stringify",
24 |     "angular",
25 |     "angularjs"
26 |   ],
27 |   "author": "arnauddri",
28 |   "license": "MIT",
29 |   "bugs": {
30 |     "url": "https://github.com/arnauddri/ng-pretty-json/issues"
31 |   },
32 |   "homepage": "https://github.com/arnauddri/ng-pretty-json",
33 |   "directories": {
34 |     "example": "example"
35 |   },
36 |   "devDependencies": {
37 |     "jasmine-core": "^2.1.3",
38 |     "karma-jasmine": "^0.3.4",
39 |     "karma-chrome-launcher": "^0.1.7",
40 |     "karma-firefox-launcher": "^0.1.4",
41 |     "karma": "^0.12.31"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/directive.js:
--------------------------------------------------------------------------------
 1 | /* global angular:false */
 2 | 'use strict';
 3 | 
 4 | angular.module('pretty.json', [])
 5 |   .directive('prettyJson',  ['$compile', function($compile) {
 6 |     return {
 7 |       restrict: 'E',
 8 |       replace: true,
 9 |       template: '<pre></pre>',
10 |       scope: {
11 |         json: '=json',
12 |         replaceKey: '=replaceKey',
13 |         replaceValue: '=replaceValue',
14 |         indentValue: '=',
15 |         indentKey: '='
16 |       },
17 |       link: function(scope, element) {
18 |         scope.$watch(
19 |           function() { return scope.json; },
20 |           compileJSON
21 |         )
22 | 
23 |         var replaceKey   = scope.replaceKey || function(key, value) { return key };
24 |         var replaceValue = scope.replaceValue || function(key, value) { return value };
25 |         var indentValue  = scope.indentValue || '    ';
26 |         var indentKey    = scope.indentKey || 10;
27 | 
28 |         function compileJSON(json) {
29 |           if (!json || typeof json !== 'object')
30 |             return;
31 | 
32 |           element.html(JSON.stringify(json, prettifyJSON, indentKey)
33 |             .replace(new RegExp('":', 'g'),'":' + indentValue + ''))
34 | 
35 |           $compile(element.contents())(scope);
36 |         }
37 | 
38 |         function prettifyJSON(key, value) {
39 |           if (value && typeof value === 'object' && !Array.isArray(value)) {
40 |             var replacement = {};
41 |             for (var k in value) {
42 |               if (Object.hasOwnProperty.call(value, k))
43 |                 replacement[replaceKey(k, value[k])] = value[k];
44 |             }
45 |             return replacement
46 |           } else if (Array.isArray(value)) {
47 |             for (var k in value) {
48 |               return value
49 |             }
50 |           }
51 | 
52 |           return replaceValue(key, value);
53 |         }
54 |       }
55 |     }
56 |   }]);
57 | 


--------------------------------------------------------------------------------
/src/directive.prefix:
--------------------------------------------------------------------------------
1 | if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports === exports){
2 |   module.exports = 'pretty.json';
3 | }
4 | 
5 | (function (window, angular, undefined) {
6 | 


--------------------------------------------------------------------------------
/src/directive.suffix:
--------------------------------------------------------------------------------
1 | 
2 | })(window, window.angular);
3 | 


--------------------------------------------------------------------------------
/test/directive.spec.js:
--------------------------------------------------------------------------------
 1 | describe('ngPrettyJson', function() {
 2 |   'use strict';
 3 | 
 4 |   var element,
 5 |       $scope,
 6 |       $compile,
 7 |       doc = null,
 8 |       html =
 9 |         '<pretty-json json="json" replace-key="replaceKey" ' +
10 |         'replace-value="replaceValue" indent-key="4" ' +
11 |         'indent-value="indentValue"></pretty-json>';
12 | 
13 |   beforeEach(module('pretty.json'));
14 | 
15 |   beforeEach(function() {
16 |     inject(function($document, $rootScope, _$compile_){
17 |       $scope   = $rootScope.$new();
18 |       $compile = _$compile_;
19 |       angular.element($document[0].querySelectorAll('body')).append(html);
20 |       doc      = $document[0];
21 |     });
22 |   });
23 | 
24 |   function compile() {
25 |     element = angular.element(doc);
26 |     $compile(element)($scope);
27 |     $scope.$digest();
28 |   }
29 | 
30 |   describe('Model binding', function() {
31 | 
32 |     beforeEach(function() {
33 |       $scope.json = { hello: 'world', foo: 'bar', fiz: 'buz' };
34 |       $scope.replaceKey = function(k, v) {
35 |         return '<scan class=\'key\'>' + k + '</scan>'
36 |       }
37 |       $scope.replaceValue = function(k, v) {
38 |         return '<scan class=\'value\'>' + v + '</scan>'
39 |       }
40 |       $scope.indentValue = ' ';
41 |     });
42 | 
43 |     it('adds the class "value" to the JSON values', function() {
44 |       compile()
45 |       var val = doc.getElementsByClassName('value')
46 |       expect(val.length).toEqual(3)
47 |       expect(angular.element(val[0]).hasClass('value')).toBe(true)
48 |       expect(angular.element(val[1]).hasClass('value')).toBe(true)
49 |       expect(angular.element(val[2]).hasClass('value')).toBe(true)
50 |     });
51 | 
52 |     it('adds the class "key" to the JSON keys', function() {
53 |       var key = doc.getElementsByClassName('key')
54 |       expect(key.length).toEqual(3)
55 |       expect(angular.element(key[0]).hasClass('key')).toBe(true)
56 |       expect(angular.element(key[1]).hasClass('key')).toBe(true)
57 |       expect(angular.element(key[2]).hasClass('key')).toBe(true)
58 |     });
59 | 
60 |     it('adds the expected space between the JSON keys and value', function() {
61 |       var span = doc.querySelectorAll('span')[1];
62 |       expect(angular.element(span).html().indexOf('": ' + $scope.indentValue + '"')).toEqual(0)
63 |     });
64 |   });
65 | 
66 | });
67 | 


--------------------------------------------------------------------------------