diff --git a/demo/demo.html b/demo/demo.html index 07ee71d..3144b5c 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -4,10 +4,13 @@ AngularJS directive demo - - - - + + + + + + + @@ -43,6 +46,50 @@

How to use

open attribute accepts a number that indicated how many levels JSON should be open

+
+
+

Branch Specific Tests

+
+ +

Deep JSON

+ + + + + +
(Depth = {{iLevels}} of {{testObjDepth}})
+
+ +
+ +

Show Hex

+
+ +
+ +
+
+

Configuration

You can set following configurations via JSONFormatterConfig provider.

Changing these configurations will impact all demos

@@ -252,7 +299,7 @@

Giant JSON

- + diff --git a/demo/demo.js b/demo/demo.js index ec441da..debb549 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -16,6 +16,45 @@ app.controller('MainCtrl', function ($scope, $http, JSONFormatterConfig) { JSONFormatterConfig.hoverPreviewFieldCount = newValue; }); + ////http://stackoverflow.com/questions/13523951/how-to-check-the-depth-of-an-object + function depthOf( obj ) { + + var level = 1; + var key; + + if (!angular.isObject( obj )) { + return level; + } + + for (key in obj) { + if (!obj.hasOwnProperty(key)) { + continue; + } + + if (angular.isObject( obj[key] )) { + var depth = depthOf(obj[key]) + 1; + level = Math.max(depth, level); + } + } + return level; + } // depthOf + + $scope.iLevels = 1; + $scope.testObj = { lvl0: { num: 12, lvl1: { lvl2: { lvl3: { lvl4: { lvl5: { lvl6: { lvl7: { lvl8: { lvl9: { lvl10: { lvl11: { lvl12: { end:true } } } } } } } } } } } } } }; + $scope.testObjDepth = depthOf($scope.testObj); + $scope.incLevel = function() { + $scope.iLevels++; + if ($scope.iLevels > $scope.testObjDepth) { + $scope.iLevels = $scope.testObjDepth; + } + } + $scope.decLevel = function() { + $scope.iLevels--; + if ($scope.iLevels < 0) { + $scope.iLevels = 0; + } + } + $scope.undef = undefined; $scope.textarea = '{}'; $scope.complex = { diff --git a/dist/json-formatter.js b/dist/json-formatter.js index 7f636a1..ad8ac8b 100644 --- a/dist/json-formatter.js +++ b/dist/json-formatter.js @@ -54,6 +54,35 @@ angular.module('jsonFormatter', ['RecursionHelper']) return str.replace('"', '\"'); } + function isFloat(n) { + return Number(n) === n && n % 1 !== 0; + } + + function toHex(val, padLen) { + + if (typeof val == 'undefined') { + return ""; + } + + if (typeof val == 'string') { + val = parseInt(val); + } + + var sVal = (val < 0 ? (0xFFFFFFFF + val + 1) : val).toString(16); + + if (typeof padLen != 'undefined') { + + if (sVal.length < padLen) { + // +1 because the Array gives one less that you want + var len = (padLen - sVal.length) + 1; + sVal = Array(len).join("0") + sVal; + } + } + + return sVal.toUpperCase(); + + }; // toHex + // From http://stackoverflow.com/a/332429 function getObjectName(object) { if (object === undefined) { @@ -79,7 +108,7 @@ angular.module('jsonFormatter', ['RecursionHelper']) return typeof object; } - function getValuePreview (object, value) { + function getValuePreview (scope, object, value) { var type = getType(object); if (type === 'null' || type === 'undefined') { return type; } @@ -87,6 +116,11 @@ angular.module('jsonFormatter', ['RecursionHelper']) if (type === 'string') { value = '"' + escapeString(value) + '"'; } + if ((type === 'number') && (!isFloat(value))) { + if (scope.showHex) { + value = value + ' (0x' + toHex(value) + ')'; + } + } if (type === 'function'){ // Remove content of the function @@ -98,14 +132,14 @@ angular.module('jsonFormatter', ['RecursionHelper']) return value; } - function getPreview(object) { + function getPreview(scope, object) { var value = ''; if (angular.isObject(object)) { value = getObjectName(object); if (angular.isArray(object)) value += '[' + object.length + ']'; } else { - value = getValuePreview(object, object); + value = getValuePreview(scope, object, object); } return value; } @@ -171,7 +205,7 @@ angular.module('jsonFormatter', ['RecursionHelper']) }; scope.parseValue = function (value){ - return getValuePreview(scope.json, value); + return getValuePreview(scope, scope.json, value); }; scope.showThumbnail = function () { @@ -185,7 +219,9 @@ angular.module('jsonFormatter', ['RecursionHelper']) if (scope.json.length > JSONFormatterConfig.hoverPreviewArrayCount) { return 'Array[' + scope.json.length + ']'; } else { - return '[' + scope.json.map(getPreview).join(', ') + ']'; + return '[' + scope.json.map(function(obj) { + return getPreview(scope, obj); + } ).join(', ') + ']'; } } else { @@ -196,7 +232,7 @@ angular.module('jsonFormatter', ['RecursionHelper']) // json value schematic information var kvs = narrowKeys - .map(function (key) { return key + ':' + getPreview(scope.json[key]); }); + .map(function (key) { return key + ':' + getPreview(scope, scope.json[key]); }); // if keys count greater then 5 then show ellipsis var ellipsis = keys.length >= 5 ? '…' : ''; @@ -204,6 +240,10 @@ angular.module('jsonFormatter', ['RecursionHelper']) return '{' + kvs.join(', ') + ellipsis + '}'; } }; + + scope.$watch('open', function(value) { + scope.isOpen = !!scope.open; + }, false); } return { @@ -213,7 +253,8 @@ angular.module('jsonFormatter', ['RecursionHelper']) scope: { json: '=', key: '=', - open: '=' + open: '=', + showHex: '=' }, compile: function(element) { @@ -275,4 +316,4 @@ angular.module('RecursionHelper', []).factory('RecursionHelper', ['$compile', fu }; }]); -angular.module("jsonFormatter").run(["$templateCache", function($templateCache) {$templateCache.put("json-formatter.html","
0\" class=\"json-formatter-row\"> {{key}}: {{getConstructorName(json)}} [{{json.length}}] {{parseValue(json)}} {{getThumbnail()}}
");}]); \ No newline at end of file +angular.module("jsonFormatter").run(["$templateCache", function($templateCache) {$templateCache.put("json-formatter.html","
0\" class=\"json-formatter-row\"> {{key}}: {{getConstructorName(json)}} [{{json.length}}] {{parseValue(json)}} {{getThumbnail()}}
");}]); \ No newline at end of file diff --git a/src/json-formatter.html b/src/json-formatter.html index 17bb8fd..0e7d2b3 100644 --- a/src/json-formatter.html +++ b/src/json-formatter.html @@ -14,7 +14,7 @@
- +
diff --git a/src/json-formatter.js b/src/json-formatter.js index 36ab383..1dc1e56 100644 --- a/src/json-formatter.js +++ b/src/json-formatter.js @@ -46,6 +46,35 @@ angular.module('jsonFormatter', ['RecursionHelper']) return str.replace('"', '\"'); } + function isFloat(n) { + return Number(n) === n && n % 1 !== 0; + } + + function toHex(val, padLen) { + + if (typeof val == 'undefined') { + return ""; + } + + if (typeof val == 'string') { + val = parseInt(val); + } + + var sVal = (val < 0 ? (0xFFFFFFFF + val + 1) : val).toString(16); + + if (typeof padLen != 'undefined') { + + if (sVal.length < padLen) { + // +1 because the Array gives one less that you want + var len = (padLen - sVal.length) + 1; + sVal = Array(len).join("0") + sVal; + } + } + + return sVal.toUpperCase(); + + }; // toHex + // From http://stackoverflow.com/a/332429 function getObjectName(object) { if (object === undefined) { @@ -79,6 +108,9 @@ angular.module('jsonFormatter', ['RecursionHelper']) if (type === 'string') { value = '"' + escapeString(value) + '"'; } + if ((type === 'number') && (!isFloat(value))) { + value = value+' (0x'+toHex(value)+')'; + } if (type === 'function'){ // Remove content of the function @@ -196,6 +228,10 @@ angular.module('jsonFormatter', ['RecursionHelper']) return '{' + kvs.join(', ') + ellipsis + '}'; } }; + + scope.$watch('open', function(value) { + scope.isOpen = !!scope.open; + }, false); } return { @@ -220,4 +256,4 @@ angular.module('jsonFormatter', ['RecursionHelper']) // angular.module('myApp', [require('jsonformatter')]); if (typeof module === 'object') { module.exports = 'jsonFormatter'; -} \ No newline at end of file +}