From 5de2114b5f35264ebb6be4b1fcf1158c45d975cb Mon Sep 17 00:00:00 2001 From: Tysen Moore Date: Thu, 17 Dec 2015 18:22:15 -0500 Subject: [PATCH 1/8] Added a watch on 'open' for dynamic open changes --- src/json-formatter.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/json-formatter.js b/src/json-formatter.js index 36ab383..60208b3 100644 --- a/src/json-formatter.js +++ b/src/json-formatter.js @@ -196,6 +196,14 @@ angular.module('jsonFormatter', ['RecursionHelper']) return '{' + kvs.join(', ') + ellipsis + '}'; } }; + + if (typeof scope.watchOpen == 'undefined') { + // Singleton + scope.watchOpen = true; + scope.$watch('open', function(value) { + scope.isOpen = !!scope.open; + }, false); + } } return { From 41325c22f2d1dc5e150d1c7900a9d73e5019740a Mon Sep 17 00:00:00 2001 From: Tysen Moore Date: Thu, 17 Dec 2015 18:42:30 -0500 Subject: [PATCH 2/8] Added watch to the dist version as well. --- dist/json-formatter.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/dist/json-formatter.js b/dist/json-formatter.js index 7f636a1..15c6391 100644 --- a/dist/json-formatter.js +++ b/dist/json-formatter.js @@ -204,6 +204,14 @@ angular.module('jsonFormatter', ['RecursionHelper']) return '{' + kvs.join(', ') + ellipsis + '}'; } }; + + if (typeof scope.watchOpen == 'undefined') { + // Singleton + scope.watchOpen = true; + scope.$watch('open', function(value) { + scope.isOpen = !!scope.open; + }, false); + } } return { From 9d66c207e8e9ef92c5f04c7c7d4735b8c73f1841 Mon Sep 17 00:00:00 2001 From: Tysen Moore Date: Fri, 18 Dec 2015 12:29:53 -0500 Subject: [PATCH 3/8] - Numbers now displayed with HEX (later make optional) - Changed open watch to no longer be a singleton --- dist/json-formatter.js | 38 +++++++++++++++++++++++++++++++------- src/json-formatter.js | 40 ++++++++++++++++++++++++++++++++-------- 2 files changed, 63 insertions(+), 15 deletions(-) diff --git a/dist/json-formatter.js b/dist/json-formatter.js index 15c6391..96a0277 100644 --- a/dist/json-formatter.js +++ b/dist/json-formatter.js @@ -54,6 +54,31 @@ angular.module('jsonFormatter', ['RecursionHelper']) return str.replace('"', '\"'); } + 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) { @@ -87,6 +112,9 @@ angular.module('jsonFormatter', ['RecursionHelper']) if (type === 'string') { value = '"' + escapeString(value) + '"'; } + if (type === 'number') { + value = value+' (0x'+toHex(value)+')'; + } if (type === 'function'){ // Remove content of the function @@ -205,13 +233,9 @@ angular.module('jsonFormatter', ['RecursionHelper']) } }; - if (typeof scope.watchOpen == 'undefined') { - // Singleton - scope.watchOpen = true; - scope.$watch('open', function(value) { - scope.isOpen = !!scope.open; - }, false); - } + scope.$watch('open', function(value) { + scope.isOpen = !!scope.open; + }, false); } return { diff --git a/src/json-formatter.js b/src/json-formatter.js index 60208b3..c245458 100644 --- a/src/json-formatter.js +++ b/src/json-formatter.js @@ -46,6 +46,31 @@ angular.module('jsonFormatter', ['RecursionHelper']) return str.replace('"', '\"'); } + 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 +104,9 @@ angular.module('jsonFormatter', ['RecursionHelper']) if (type === 'string') { value = '"' + escapeString(value) + '"'; } + if (type === 'number') { + value = value+' (0x'+toHex(value)+')'; + } if (type === 'function'){ // Remove content of the function @@ -197,13 +225,9 @@ angular.module('jsonFormatter', ['RecursionHelper']) } }; - if (typeof scope.watchOpen == 'undefined') { - // Singleton - scope.watchOpen = true; - scope.$watch('open', function(value) { - scope.isOpen = !!scope.open; - }, false); - } + scope.$watch('open', function(value) { + scope.isOpen = !!scope.open; + }, false); } return { @@ -228,4 +252,4 @@ angular.module('jsonFormatter', ['RecursionHelper']) // angular.module('myApp', [require('jsonformatter')]); if (typeof module === 'object') { module.exports = 'jsonFormatter'; -} \ No newline at end of file +} From d9a87cc914c6d93e67c076c8d2eb5d8110def77c Mon Sep 17 00:00:00 2001 From: Tysen Moore Date: Mon, 22 Aug 2016 10:53:45 -0400 Subject: [PATCH 4/8] Removed attempt to display hex for a float --- dist/json-formatter.js | 6 +++++- src/json-formatter.js | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/dist/json-formatter.js b/dist/json-formatter.js index 96a0277..d272c90 100644 --- a/dist/json-formatter.js +++ b/dist/json-formatter.js @@ -54,6 +54,10 @@ 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') { @@ -112,7 +116,7 @@ angular.module('jsonFormatter', ['RecursionHelper']) if (type === 'string') { value = '"' + escapeString(value) + '"'; } - if (type === 'number') { + if ((type === 'number') && (!isFloat(value))) { value = value+' (0x'+toHex(value)+')'; } if (type === 'function'){ diff --git a/src/json-formatter.js b/src/json-formatter.js index c245458..1dc1e56 100644 --- a/src/json-formatter.js +++ b/src/json-formatter.js @@ -46,6 +46,10 @@ 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') { @@ -104,7 +108,7 @@ angular.module('jsonFormatter', ['RecursionHelper']) if (type === 'string') { value = '"' + escapeString(value) + '"'; } - if (type === 'number') { + if ((type === 'number') && (!isFloat(value))) { value = value+' (0x'+toHex(value)+')'; } if (type === 'function'){ From f4c49273af873743504ebe518fa5be9598ee1762 Mon Sep 17 00:00:00 2001 From: Tysen Moore Date: Mon, 9 Jan 2017 09:05:12 -0500 Subject: [PATCH 5/8] - Fix/workaround to digest recursion exception for larger (deeper) objects --- dist/json-formatter.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/dist/json-formatter.js b/dist/json-formatter.js index d272c90..370014a 100644 --- a/dist/json-formatter.js +++ b/dist/json-formatter.js @@ -49,7 +49,7 @@ angular.module('jsonFormatter', ['RecursionHelper']) }; }) -.directive('jsonFormatter', ['RecursionHelper', 'JSONFormatterConfig', function jsonFormatterDirective(RecursionHelper, JSONFormatterConfig) { +.directive('jsonFormatter', ['RecursionHelper', 'JSONFormatterConfig', '$timeout', function jsonFormatterDirective(RecursionHelper, JSONFormatterConfig, $timeout) { function escapeString(str) { return str.replace('"', '\"'); } @@ -238,7 +238,10 @@ angular.module('jsonFormatter', ['RecursionHelper']) }; scope.$watch('open', function(value) { - scope.isOpen = !!scope.open; + // Without the timeout we get digest recursion + $timeout(function() { + scope.isOpen = !!scope.open; + },10); }, false); } From fab30d986d391c3e623e33066fd9909e53ce4d38 Mon Sep 17 00:00:00 2001 From: Tysen Moore Date: Mon, 9 Jan 2017 12:37:18 -0500 Subject: [PATCH 6/8] Revert "- Fix/workaround to digest recursion exception for larger (deeper) objects" This reverts commit f4c49273af873743504ebe518fa5be9598ee1762. --- dist/json-formatter.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/dist/json-formatter.js b/dist/json-formatter.js index 370014a..d272c90 100644 --- a/dist/json-formatter.js +++ b/dist/json-formatter.js @@ -49,7 +49,7 @@ angular.module('jsonFormatter', ['RecursionHelper']) }; }) -.directive('jsonFormatter', ['RecursionHelper', 'JSONFormatterConfig', '$timeout', function jsonFormatterDirective(RecursionHelper, JSONFormatterConfig, $timeout) { +.directive('jsonFormatter', ['RecursionHelper', 'JSONFormatterConfig', function jsonFormatterDirective(RecursionHelper, JSONFormatterConfig) { function escapeString(str) { return str.replace('"', '\"'); } @@ -238,10 +238,7 @@ angular.module('jsonFormatter', ['RecursionHelper']) }; scope.$watch('open', function(value) { - // Without the timeout we get digest recursion - $timeout(function() { - scope.isOpen = !!scope.open; - },10); + scope.isOpen = !!scope.open; }, false); } From 59dcfcc0fc9091c6e54c984ee045db7bb45fd605 Mon Sep 17 00:00:00 2001 From: Tysen Moore Date: Tue, 10 Jan 2017 13:01:28 -0500 Subject: [PATCH 7/8] - Fixed the demo/demo.html so it will now run in a browser with no special work needed - Added branch specific tests section to the demo.html to easily test the branch features --- demo/demo.html | 51 +++++++++++++++++++++++++++++++++++++++++++++----- demo/demo.js | 39 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 85 insertions(+), 5 deletions(-) diff --git a/demo/demo.html b/demo/demo.html index 07ee71d..ece1393 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -4,10 +4,13 @@ AngularJS directive demo - - - - + + + + + + + @@ -43,6 +46,44 @@

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}})
+
+ +
+ +
+
+

Configuration

You can set following configurations via JSONFormatterConfig provider.

Changing these configurations will impact all demos

@@ -252,7 +293,7 @@

Giant JSON

- + diff --git a/demo/demo.js b/demo/demo.js index ec441da..108438c 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: { 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 = { From b20358cff92fc389ddbc21a8371f417cb4d02e6d Mon Sep 17 00:00:00 2001 From: Tysen Moore Date: Tue, 10 Jan 2017 16:48:49 -0500 Subject: [PATCH 8/8] Added 'show-hex' option to optionally show the numbers as hex in addition to the decimal value --- demo/demo.html | 6 ++++++ demo/demo.js | 2 +- dist/json-formatter.js | 23 ++++++++++++++--------- src/json-formatter.html | 2 +- 4 files changed, 22 insertions(+), 11 deletions(-) diff --git a/demo/demo.html b/demo/demo.html index ece1393..3144b5c 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -50,6 +50,7 @@

How to use

Branch Specific Tests

+

Deep JSON

+

Show Hex

+
+ +
+
diff --git a/demo/demo.js b/demo/demo.js index 108438c..debb549 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -40,7 +40,7 @@ app.controller('MainCtrl', function ($scope, $http, JSONFormatterConfig) { } // depthOf $scope.iLevels = 1; - $scope.testObj = { lvl0: { lvl1: { lvl2: { lvl3: { lvl4: { lvl5: { lvl6: { lvl7: { lvl8: { lvl9: { lvl10: { lvl11: { lvl12: { end:true } } } } } } } } } } } } } }; + $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++; diff --git a/dist/json-formatter.js b/dist/json-formatter.js index d272c90..ad8ac8b 100644 --- a/dist/json-formatter.js +++ b/dist/json-formatter.js @@ -108,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; } @@ -117,7 +117,9 @@ angular.module('jsonFormatter', ['RecursionHelper']) value = '"' + escapeString(value) + '"'; } if ((type === 'number') && (!isFloat(value))) { - value = value+' (0x'+toHex(value)+')'; + if (scope.showHex) { + value = value + ' (0x' + toHex(value) + ')'; + } } if (type === 'function'){ @@ -130,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; } @@ -203,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 () { @@ -217,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 { @@ -228,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 ? '…' : ''; @@ -249,7 +253,8 @@ angular.module('jsonFormatter', ['RecursionHelper']) scope: { json: '=', key: '=', - open: '=' + open: '=', + showHex: '=' }, compile: function(element) { @@ -311,4 +316,4 @@ angular.module('RecursionHelper', []).factory('RecursionHelper', ['$compile', fu }; }]); -angular.module("jsonFormatter").run(["$templateCache", function($templateCache) {$templateCache.put("json-formatter.html","");}]); \ No newline at end of file +angular.module("jsonFormatter").run(["$templateCache", function($templateCache) {$templateCache.put("json-formatter.html","");}]); \ 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 @@
- +