JsonTree.js | Documentation

Version 2.1.0:

New Features:

Added data array paging (with new Back/Next buttons in the title bar), which will allow you to show base data array items on separate pages.
The title bar buttons now use symbols instead of text (to free up space), and use tooltips that use existing configuration settings.

Binding Options:

The binding option "title.showCopyButton" now defaults to true.
Added a new binding option called "showArrayItemsAsSeparateObjects" (defaults to false), which states if base data array items should be shown on separate pages.
Added a new binding option called "copyOnlyCurrentPage" (defaults to false), which states if the current page of JSON should be copied, instead of everything (when "showArrayItemsAsSeparateObjects" is true).

Configuration Options:

BREAKING: All text-based configuration options are now under a new section called "text".
Added a new option called "text.closeAllButtonSymbolText", which states the symbol text to use for the "Open All" button (defaults to "↓").
Added a new option called "text.openAllButtonSymbolText", which states the symbol text to use for the "Close All" button (defaults to "↑").
Added a new option called "text.copyAllButtonSymbolText", which states the symbol text to use for the "Copy All" button (defaults to "❐").
Added a new option called "text.backButtonText", which states the symbol text to use for the "Back" button (defaults to "Back").
Added a new option called "text.nextButtonText", which states the symbol text to use for the "Next" button (defaults to "Next").
Added a new option called "text.backButtonSymbolText", which states the symbol text to use for the "Back" button (defaults to "←").
Added a new option called "text.nextButtonSymbolText", which states the symbol text to use for the "Next" button (defaults to "→").

General Improvements:

Fixed the nuspec file causing very large NuGet packages to be created.
Fixed missing return types for private functions.
Massive code reorganization (.ts files moved into separate folders).
NPM package updates.
Moved all string concatenations to use string templates.
When "Copy All" is pressed, the JSON copied to the clipboard is now in a friendly format.
Array value indexes are now shown inside [] characters (helps to show it's an index).

Fixes:

Fixed an issue that caused the buttons in the display to use the wrong font.

Version 2.0.0:

Language Shift:

The entire project has been rewritten in TypeScript, allowing all components to be exported, which allows better support for libraries such as React, Angular, etc.
The TypeScript code is compiled to ES2016 instead of ES5 (older browsers, such as IE, are no longer supported).

Building:

You can now run separate builds to produce CJS, ESM, and Minimized project versions.
All files not required for the NPM packages have now been excluded.

Testing:

Removed the "src" and "dist" folders under "test". Only the dist versions remain, removing duplication.
Added "BUILD_INSTRUCTIONS.md" to help first-time users set up their dev environments.

Version 1.1.2:

Added CDN link support, and updated documentation.

Version 1.1.1:

Added export support for the global "$jsontree" object, which can now be imported as "jsontree.js".

Version 1.1.0:

New Features:

Added ignore all value types support!

Binding Options:

BREAKING: All binding ignore options are now available under a new area called "ignore".
Added a new binding option called "ignore.booleanValues" (defaults to false), which states if boolean values should be ignored.
Added a new binding option called "ignore.decimalValues" (defaults to false), which states if decimal values should be ignored.
Added a new binding option called "ignore.numberValues" (defaults to false), which states if number values should be ignored.
Added a new binding option called "ignore.stringValues" (defaults to false), which states if string values should be ignored.
Added a new binding option called "ignore.dateValues" (defaults to false), which states if date values should be ignored.
Added a new binding option called "ignore.objectValues" (defaults to false), which states if object values should be ignored.
Added a new binding option called "ignore.arrayValues" (defaults to false), which states if array values should be ignored.
Added a new binding option called "showStringHexColors" (defaults to false), which states if HEX color only string values should show the color in the display.

Binding Options - Custom Triggers:

The custom trigger "onValueClick" has a new parameter called "type", which states the value type that was clicked ("string", "boolean", etc).
The custom trigger "onValueClick" is no longer assigned to null values.

Version 1.0.0:

New Features:

Added full date and time rendering support! This can be adjusted for the display using the binding option "dateTimeFormat".

Binding Options:

BREAKING: Renamed the binding attribute "data-jsontree-options" to "data-jsontree-js".
BREAKING: All binding option events are now available under a new area called "events".
BREAKING: All title bar binding options are now available under a new area called "title" (with renames).
The binding option "dateTimeFormat" now defaults to "{dd}{o} {mmmm} {yyyy} {hh}:{MM}:{ss}" and now supports "{mmmm}", "{mmm}", "{dddd}", and "{ddd}" (see documentation).
Added a new binding option called "maximumStringLength" (defaults to 0, state will use the full string), which states the maximum size a string can be in the display.

Configuration Options:

Added new configuration option "stText" (defaults to "st"), which states the day ordinal for the first day.
Added new configuration option "ndText" (defaults to "nd"), which states the day ordinal for the second day.
Added new configuration option "rdText" (defaults to "rd"), which states the day ordinal for the third day.
Added new configuration option "thText" (defaults to "th"), which states the day ordinal for the other days.
Added new configuration option "dayNames" (defaults to all day names starting from Monday), which states all the full-day names.
Added new configuration option "dayNamesAbbreviated" (defaults to all day names starting from Mon), which states all the abbreviated day names.
Added new configuration option "monthNames" (defaults to all month names starting from January), which states all the full month names.
Added new configuration option "monthNamesAbbreviated" (defaults to all month names starting from Jan), which states all the abbreviated month names.
Added new configuration option "ellipsisText" (defaults to "..."), which states the ellipsis text to use for areas that are too long.

Fixes & Improvements:

All text translations now allow empty text to be passed (which will prevent them from defaulting to the English version).

Version 0.8.0:

Configuration Options:

Added new configuration option "objectErrorText", which states the error text that should be shown when an object error is detected (defaults to "Errors in object: {{error_1}}, {{error_2}}").
Added a new configuration option called "attributeNotValidErrorText", which states the error text that should be shown when a binding object isn't valid (defaults to "The attribute '{{attribute_name}}' is not a valid object.").
Added a new configuration option called "attributeNotSetErrorText", which states the error text that should be shown when a binding attribute isn't set (defaults to "The attribute '{{attribute_name}}' has not been set correctly.").

Fixes & Improvements:

Added "use strict" support internally and updated all public functions to use the new scope.

Version 0.7.0:

New Features:

Added custom value rendering support! This allows custom triggers to be used to render the values for specific types how you choose!

Binding Options:

Added a new binding option called "ignoreUnknownValues", which states if UNKNOWN values should be ignored and not rendered (defaults to false).

Binding Options - Custom Triggers:

Added a new binding option custom trigger called "onBooleanRender", which states an event that should be triggered when a boolean value is rendered.
Added a new binding option custom trigger called "onDecimalRender", which states an event that should be triggered when a decimal value is rendered.
Added a new binding option custom trigger called "onNumberRender", which states an event that should be triggered when a number value is rendered.
Added a new binding option custom trigger called "onStringRender", which states an event that should be triggered when a string value is rendered.
Added a new binding option custom trigger called "onDateRender", which states an event that should be triggered when a date value is rendered.
Added a new binding option custom trigger called "onFunctionRender", which states an event that should be triggered when a function value is rendered.
Added a new binding option custom trigger called "onNullRender", which states an event that should be triggered when a null value is rendered.
Added a new binding option custom trigger called "onUnknownRender", which states an event that should be triggered when an unknown value is rendered.

Fixes & Improvements:

Internal code cleanups to make things easier to read.
Fixed the CSS class "unknown" having a hover effect.

Version 0.6.0:

Binding Options:

Added a new binding option called "maximumDecimalPlaces", which states how many decimal places should be used for decimal values (defaults to 2).

Fixes & Improvements:

Fixed a minor formatting issue in the "package.json" file.
Fixed a fault that prevented the date formatter "{dd}" from showing a padded number.

Version 0.5.1:

Fixed the README files containing invalid characters.
Fixed the spacing around the Object/Array nodes.

Version 0.5.0:

Binding Options - Custom Triggers:

Added a new binding option custom trigger called "onDestroy", which states an event that should be triggered when an element is destroyed.

Public Functions:

Added a new public function "openAll()", which will open all the nodes for a specific DOM element.
Added a new public function "closeAll()", which will close all the nodes for a specific DOM element.
Added a new public function "destroy()", which will revert a rendered DOM element to its original state.
Added a new public function "destroyAll()", which will revert all rendered DOM elements to their original state.
Added a new public function "getIds()", which will return all the IDs for the elements that have been rendered.

Version 0.4.0:

Binding Options:

Added a new binding option called "showTitleCopyButton", which states if the copy all button should be shown in the title bar (defaults to false).
Added a new binding option called "showValueColors", which states if the colors for the values should be shown (defaults to true).

Binding Options - Custom Triggers:

Added a new binding option custom trigger called "onCopyAll", which states an event that should be triggered when the JSON is copied to the clipboard.
Added a new binding option custom trigger called "onOpenAll", which states an event that should be triggered when all the JSON nodes are opened.
Added a new binding option custom trigger called "onCloseAll", which states an event that should be triggered when all the JSON nodes are closed.

Configuration Options:

Added a new binding option called "copyAllButtonText", which states the text that should be shown for the "Copy All" button text.

Fixes:

Fixed the font being overridden for the display.

Version 0.3.0:

Binding Options:

Added a new binding option called "ignoreNullValues", which states if NULL values should be ignored and not rendered (defaults to false).
Added a new binding option called "ignoreFunctionValues", which states if FUNCTION values should be ignored and not rendered (defaults to false).
Added a new binding option called "reverseArrayValues", which states if the values from an array should be shown in reverse order (defaults to false).
Added a new binding option called "addArrayIndexPadding", which states if the indexes shown for an array should be padded (defaults to false).
Updated the default value for the binding option "dateTimeFormat" to "{dd}/{mm}/{yyyy} {hh}:{MM}:{ss}".

Binding Options - Custom Triggers:

Added a new binding option custom trigger called "onRefresh", which states an event that should be triggered when a rendered element is refreshed.

Public Functions:

Added a new public function "refresh()", which refreshes the UI for a specific element.
Added a new public function "refreshAll()", which will refresh all the rendered elements.

UI Improvements:

Added "unknown" property type support! This will use a new CSS class called "unknown".
Added "decimal" property type support! This will use a new CSS class called "decimal".

General Improvements:

All data is now tracked internally, allowing for future improvements.

Documentation:

Fixed the badge links in the README files pointing to the wrong project.

Version 0.2.0:

Binding Options:

Added a new binding option called "sortPropertyNamesInAlphabeticalOrder", which states if the sorted property names for an object should be in alphabetical order (defaults to true).
Added a new binding option called "showCommas", which states if commas should be shown at the end of each line (defaults to false).

Public Functions:

Added new public function "render()", which will render a specific DOM element using the options you specify.
Added new public function "renderAll()", which will find all new DOM elements with the "data-jsontree-options" attribute and render them.

UI Improvements:

The spacing used for the title bar buttons is now smaller when viewed on a mobile.

Documentation:

Fixed some spelling and grammar mistakes in the documentation.
Minor improvements to the documentation layout.

Version 0.1.0:

Everything :)