diff --git a/README.md b/README.md index d27215a..bbc37fd 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ To install the package, use the command `npm install json-display`. The function can either be imported with CommonJS, AMD or will be added to the window as `JSONDisplay`. -`JSONDisplay(json, openLevels, styleOptions)` +`JSONDisplay(json, openLevels, styleOptions, formatters)` **Arguments** @@ -16,7 +16,9 @@ The function can either be imported with CommonJS, AMD or will be added to the w `openLevels`: *(optional)* This is the amount of levels of the JSON structure that will be automatically opened when first rendering the object. 0 or less will cause the entire structure to begin closed. Null, anything not parsable as an integer, or simply not providing an argument will cause every level to begin open. -`styleOptions`: *(optional)* This is an object that provides overrides for the tags and styles used for the HTML structure, it will be deep merged into the default options so you do not have to provide all the options. See the source code to understand the structure you are adding the styles and tags into. +`styleOptions`: *(optional)* This is an object that provides overrides for the tags and styles used for the HTML structure, it will be deep merged into the default options so you do not have to provide all the options. See the source code to understand the structure you are adding the styles and tags into. + +`formatters`: *(optional)* This parameter provides an override for formatting date objects. The default options are: @@ -42,9 +44,17 @@ The default options are: } ``` +The default formatters are: + +``` +{ + date: function(date) { return date.toISOString(); }, +} +``` + **Return value** -The return value is a HTMLElement structure +The return value is an HTMLElement structure ## Contributing diff --git a/json-display.js b/json-display.js index 5c8cd43..fcb3672 100644 --- a/json-display.js +++ b/json-display.js @@ -27,7 +27,7 @@ root.JSONDisplay = factory(); } }(this, function() { - return function JSONDisplay(json, openLevelsArg, styleOptionsArg) { + return function JSONDisplay(json, openLevelsArg, styleOptionsArg, formattersArg) { var DEFAULT_STYLE_OPTIONS = { root: { tag: 'pre', style: 'padding: 5px; font-size: 1rem;' }, titleContainer: { tag: 'div', style: 'margin-bottom: 3px;' }, @@ -47,10 +47,16 @@ booleanValue: { tag: 'span', style: 'color: blue;' }, nullValue: { tag: 'span', style: 'color: blue;' }, }; + var DEFAULT_FORMATTERS = { + date: function(date) { return date.toISOString(); }, + }; var openLevels = isNaN(parseInt(openLevelsArg)) ? Infinity : parseInt(openLevelsArg); var styleOptions = typeof styleOptionsArg === 'object' ? mergeStyleOptions(DEFAULT_STYLE_OPTIONS, styleOptionsArg) : DEFAULT_STYLE_OPTIONS; + var formatters = typeof formattersArg === 'object' + ? mergeFormatterOptions(DEFAULT_FORMATTERS, formattersArg) + : DEFAULT_FORMATTERS; if (typeof Object.assign != 'function') { Object.assign = function(target) { @@ -83,7 +89,7 @@ var voidElement = getValue(null); element.appendChild(voidElement); } else if (json instanceof Date) { - var dateElement = getValue(json.toISOString()); + var dateElement = getValue(formatters.date(json)); element.appendChild(dateElement); } else if (typeof json !== 'object') { var nonExpandableElement = getValue(json); @@ -109,7 +115,7 @@ } else if (json[key] === null || json[key] === undefined) { container.appendChild(getStandardPair(key, null)); } else if (json[key] instanceof Date) { - container.appendChild(getStandardPair(key, json[key].toISOString())); + container.appendChild(getStandardPair(key, formatters.date(json[key]))); } else if (typeof json[key] === 'object') { container.appendChild(getTitle('Object', key, nextLevelIsClosed)); container.appendChild(convertJsonToElements(json[key], index + 1)); @@ -226,6 +232,14 @@ return merged; } + function mergeFormatterOptions(defaults, overrides) { + var merged = {}; + for (var key in defaults) { + merged[key] = overrides[key] || defaults[key]; + } + return merged; + } + return render(); } })); diff --git a/test/type-handling.spec.js b/test/type-handling.spec.js index f5e9721..a3a5f9f 100644 --- a/test/type-handling.spec.js +++ b/test/type-handling.spec.js @@ -50,7 +50,7 @@ describe('Type handling', function() { }); it('correctly displays dates', function () { - var result = JSONDisplay(new Date(2017, 0, 1, 12)); + var result = JSONDisplay(new Date(Date.UTC(2017, 0, 1, 12))); expect(result.firstChild.innerHTML).to.equal('"2017-01-01T12:00:00.000Z"'); }); @@ -142,7 +142,7 @@ describe('Type handling', function() { it('correctly displays dates', function () { var result = JSONDisplay({ - date: new Date(2017, 0, 1, 12), + date: new Date(Date.UTC(2017, 0, 1, 12)), }); expect(result.childNodes[1].firstChild.firstChild.innerHTML).to.equal('date: '); @@ -262,7 +262,7 @@ describe('Type handling', function() { it('correctly displays dates', function () { var result = JSONDisplay([ - new Date(2017, 0, 1, 12), + new Date(Date.UTC(2017, 0, 1, 12)), ]); expect(result.childNodes[1].firstChild.firstChild.innerHTML).to.equal('0: ');