JsonTree.js - Documentation - Recent Changes

Below is a list of the most recent changes made in the JsonTree.js versions released.

Download Now

v4.7.0 - 10th Dec 2024
Versions

Version 4.7.0:

New Features:

  • Added support to import CSV files (each line will be converted to a JSON object).
  • Added support to import HTML files (will be converted to a standard object as per usual).

Configuration Options:

  • The configuration option called "text.importedText" now defaults to "{0} files imported.".
  • The configuration option called "text.dragAndDropTitleText" now defaults to "Drag and drop your files to upload.".

Improvements:

  • HTML data types now contain a new property called "$type", which states the node type of the element.
  • Added a "max-height" to the inner contents container that defaults to 700px.

Fixes:

  • Fixed a few type faults in the import files area.
  • Fixed some missing types for loops.
  • Fixed a fault that prevented the HTML data type object "@children" from being converted to JSON when editing/copying.


Version 4.6.4:

  • Fixed a minimum width issue occurring on the Control Panel expand button.
  • Added a custom scrollbar, which will be used for all WebKit-based browsers moving forward.
  • Fixed both scroll bars being visible for X/Y on an edited name/value, and always being visible.
  • Fixed an issue that caused the vertical scrollbar to appear in the display when not required.
  • Updated the NPM packages to the latest versions.


Version 4.6.3:

  • Fixed a fault that prevented bulk editing from working when paging is enabled, but no array data has been used for the JSON.
  • Fixed a script error that occurred when removing the JSON (when paging is enabled, but no array data has been used for the JSON) via the Control Buttons.
  • Fixed a fault that caused errors when calling backPage() and nextPage() when paging is enabled, but no array data has been used for the JSON.


Version 4.6.2:

  • Fixed a fault that prevented the shortcut keys from working correctly.


Version 4.6.1:

  • Fixed a fault that prevented the Control Buttons from sticking to the top-right of the JSON column.
  • Fixed a fault that caused the Control Buttons open state to be forgotten when moving columns around.
  • RGB colors that are now spaced out better for readability (for example, "rgb( 1, 1, 1 )").
  • Added "{aa}" Date/Time formatting support, which will show either AM or PM, depending on the time of day.
  • Added "{hhh}" Date/Time formatting support, which will show the hours in a 12-hour format.
  • BigInt values now show an "n" character at the end so it's clear what value they are (unless obscured by the "maximum.bigIntLength" binding option).
  • The padding used for null/undefined values in the display has been slightly decreased.


Version 4.6.0:

New Features:

  • Added support to open/close the control buttons in the main columns.

Binding Options:

  • Added a new binding option called "controlPanel.showOpenCloseButton" (defaults to true), which states if the open/close button is shown.

Configuration Options:

  • Added a new option called "text.openCloseSymbolText", which states the symbol text to use for the Control Buttons open/close button (defaults to "↹").

Improvements:

  • Updated the NPM packages to the latest versions.
  • SCSS files now use @use statements instead of @import (which has been deprecated).
  • The "Import" link now shows a space between the text and the ellipsis when no JSON is available to view.

Fixes:

  • Fixed a fault that caused the wrong nodes to be opened/closed when manually deleting a column.
  • Fixed a huge fault that caused errors when attempting to bulk edit the JSON in a column (or single view).


Version 4.5.0:

Shortcut Navigation Keys:

  • Pressing Ctrl/Command + C will copy all the JSON to the clipboard (if only one instance of JsonTree.js is used).

Binding Options:

  • Added a new binding option called "openUrlsInSameWindow" (defaults to false), which states if a URL should be opened in the same window.
  • Added a new binding option called "maximum.functionLength" (defaults to 0, state will use the full name), which states the maximum size a function can be in the display.
  • Added a new binding option called "maximum.lambdaLength" (defaults to 0, state will use the full name), which states the maximum size a lambda can be in the display.

Improvements:

  • The onscroll() method used for all columns is much faster.
  • Empty symbols are now shown as "Symbol" instead of "Symbol()".
  • Symbols that are not empty are spaced out better for readability (for example, "Symbol( id )").
  • Functions and Lambdas now show the accepted parameters.

Fixes:

  • Fixed a fault that prevented synchronized scrolling from working on all other columns except the first one.
  • Fixed a fault that didn't allow empty strings to be edited.
  • Fixed a slight misalignment of the object borders (when enabled) for the current expand icon types.
  • Fixed a fault that caused a string value that contains only whitespace characters to be treated as a float value.
  • Fixed the missing CSS variable colors from all theme files.


Version 4.4.0:

New Features:

  • Added filename display support! This will show the filename (in the root of the JSON) for imported files.
  • Added "Export" support to the Control Panel (shown when paging is enabled), allowing a page/column to be exported.
  • Added support to toggle the parsing of Floats and Big Ints.

Binding Options:

  • Added a new binding option called "maximum.propertyNameLength" (defaults to 0, state will use the full name), which states the maximum size a property name can be in the display.
  • Added a new binding option called "sideMenu.updateDisplayDelay" (defaults to 500 milliseconds), which states the delay that should be used before updating the UI (when something has changed).
  • Added a new binding option called "controlPanel.showExportButton" (defaults to true), which states if the export button is shown.
  • Added a new binding option called "parse.stringsToFloats" (defaults to false), which states if string values should be parsed to float values (if valid).
  • Added a new binding option called "parse.stringsToBigInts" (defaults to false), which states if string values should be parsed to big int values (if valid).

Improvements:

  • The ordinal text for a day in the Date/Time display values is now shown in a element.
  • Removed the transition effect for "padding" and "border" for items selected in the display.
  • When files are imported, they are now sorted and displayed in alphabetical order.
  • Improved the RegEx used to identify Date/Time strings (allowing for timezone adjustments) when parsing is enabled.

Fixes:

  • Fixed a fault that caused the binding option "controlPanel.enabled" to be ignored.
  • Fixed a fault that caused duplicate checks to occur for custom events when rendering JSON values.
  • Fixed a fault that caused the line numbers to re-render lots of times when rendering the JSON for the first time (causing performance issues with large JSON files).
  • Fixed a fault that prevented imported files from being loaded when another non-JSON file was selected at the same time.


Version 4.3.0:

New Features:

  • 4 expand icon types are now supported by default: arrows, squares, circles, and plus/minus!
  • Added custom data types support (with editing support, and filtering support).

Binding Options:

  • BREAKING: Renamed the binding option "showArrowToggles" to "showExpandIcons".
  • Added a new binding option called "emptyStringValue" (defaults to ""), which states the display value to use for empty strings.
  • Added a new binding option called "expandIconType" (defaults to "arrow"), which states the expand icon type to use (supports "arrow", "square", "circle", and "plus-minus").
  • Added a new binding option called "id" (defaults to ""), which states the ID to use for the JsonTree.js element (if not set manually for the ID attribute).
  • Added a new binding option called "class" (defaults to ""), which states the custom classes (split up using spaces) to assign to the JsonTree.js element.

Improvements:

  • Renamed the "back" and "next" CSS classes used for the toolbar buttons to "back-page" and "next-page".

Fixes:

  • Fixed a fault that caused empty strings to appear as "unknown" types.
  • Fixed a fault that caused invalid Date() objects to show strangely in the display (when they are invalid, they now default to the current Date/Time).
  • Fixed a fault that caused the background color for editable fields to appear black (in light mode).
  • Fixed a grammar mistake in the binding option "maximumInspectionLevelsReached" default.


Version 4.2.0:

New Features:

  • Added support to add JSON files directly to the pages via the Control Panel (adds them to the next page index).
  • Added support to clear the JSON being displayed (via a Side Menu button).
  • Added maximum inspection levels support (to help performance).

Binding Options:

  • Added a new binding option called "controlPanel.showImportButton" (defaults to true), which states if the import button is shown.
  • Added a new binding option called "rootName" (defaults to "root"), which states the default name to use for an object/array root (if array paging is disabled).
  • Added a new binding option category called "maximum".
  • BREAKING: Moved the binding options "maximumDecimalPlaces", "maximumStringLength", "maximumUrlLength", and "maximumEmailLength" into the "maximum" category.
  • Added a new binding option called "maximum.numberLength" (defaults to 0, state will use the full number), which states the maximum size a number can be in the display.
  • Added a new binding option called "maximum.bigIntLength" (defaults to 0, which uses the full big int), which states the maximum size a big int can be in the display.
  • Added a new binding option called "maximum.inspectionLevels" (defaults to 10), which states the maximum number of inspection levels that can be shown (helps performance).
  • Added a new binding option called "sideMenu.showClearJsonButton" (defaults to true), which states if the Clear JSON button is to be shown on the side menu.

Binding Options - Custom Triggers:

  • Added a new binding option custom trigger called "onSelectionChange", which fires an event when the selected items in the display are changed.

Configuration Options:

  • Added a new option called "text.clearJsonSymbolText", which states the symbol text to use for the clear JSON side menu button (defaults to "⏎").
  • Added a new option called "text.clearJsonText", which states the text to use for the clear JSON side menu button (defaults to "Clear JSON").
  • Added a new option called "text.maximumInspectionLevelsReached", which states the text to show when the maximum inspection levels has been reached (defaults to "Maximum inspection levels has been reached.").

Public API Functions:

  • Added a new public function called "getSelectedJsonValues()", which will return the JSON values selected in the display.

Improvements:

  • Updated the NPM packages to the latest versions.
  • The disabled background is now rendered separately from the side menu.
  • When the main display is rendered, the CSS class "json-tree-js" is now appended (instead of set) to the elements classes, which will allow custom CSS classes to be used.
  • Added a new CSS variable called "--json-tree-js-indentation-size", which will allow you to easily change the indentation level used in the display.
  • The line numbers now stick to the left when scrolling horizontally.

Fixes:

  • Fixed a text alignment issue in the columns.
  • Fixed a fault that caused the control panel to overlap items in the display (when enabled).
  • Fixed a fault that caused the drag & drop text (in light mode) to show in the wrong color.
  • Fixed a fault that caused duplicate versions of the same color to be used everywhere.
  • Fixed a fault that caused the disabled buttons (in light mode) to not show correctly as disabled.
  • Fixed a fault that caused the title bar buttons (everywhere in light mode) to use a far too dark hover/active color.
  • Fixed a fault that prevented the CSS class "full-screen" from being removed when the public function "destroy()" is called.
  • Fixed a fault that caused the control panel to not stick to the top-right when scrolling (when moving to a different page when array paging is enabled).


Version 4.1.0:

New Features:

  • Added item selection support!
  • Added context menu support for all values, which will allow you to quickly Edit and Copy (values only), and Remove items (or copy multiple items).
  • Added support to remove array items when editing them (clearing the value, then pressing enter).
  • Added support to convert HTML objects to JSON when the Copy, Copy All, or the Export button is pressed.
  • Added line numbers support (one by default), with additional options!
  • Added property name comparison support (in paging mode with columns enabled)!
  • Added support to show just primitive types in the display (they are added to a new object so they can be viewed).

Binding Options:

  • BREAKING: Renamed the binding option "includeTimeZoneInDateTimeEditing" to "includeTimeZoneInDates";
  • Added a new binding option called "parse.stringsToSymbols" (defaults to false), which states if string values should be parsed to symbol values (if valid).
  • Added a new binding option category called "lineNumbers".
  • Added a new binding option called "lineNumbers.enabled" (defaults to true), which states if line numbers should be shown.
  • Added a new binding option called "lineNumbers.padNumbers" (defaults to false), which states if line numbers should be padded.
  • Added a new binding option called "lineNumbers.addDots" (defaults to true), which states if line numbers should show a dot after the number.
  • Added a new binding option called "showClosedArraySquaredBrackets" (defaults to true), which states if the closed squared symbols ([ ... ] text) should be shown.
  • Added a new binding option called "showClosedObjectCurlyBraces" (defaults to true), which states if the closed curly braces ({ ... } text) should be shown.
  • Added a new binding option called "paging.allowComparisons" (defaults to false), which states if side-by-side property name comparisons can be shown in the display.
  • Added a new binding option called "convertClickedValuesToString" (defaults to false), which states if the values click (when an event is assigned) should be converted to strings.

Improvements:

  • Updated the NPM packages to the latest versions.
  • Added a new CSS variable called "--json-tree-js-spacing-title-bar", which states the spacing to use for the title bars and panels (and containing buttons).
  • Clicking on the "[ ... ]" or "{ ... }" closed symbols text will now open the object/array/set/map/html.
  • The Binding Options and Configuration Options are now loaded using less memory (less overwrites).
  • Renamed the CSS classes "span.type-color" and "span.type" to "span.data-type-color" and "span.data-type".
  • The binding option "includeTimeZoneInDates" setting is now used when bulk editing, or copying JSON values!
  • Undefined Values are now treated as nulls when exporting, copying, or bulk editing.
  • If any binding option under "allowEditing" is set to false, then "allowEditing.bulk" is set to false as an override (so that manual overriding editing cannot be done).
  • Renamed all shorthand variable names so they are easier to read in code reviews.

Fixes:

  • Fixed some strange spacing issues around the title bar/panel buttons.
  • Fixed some missing semi-colons in the SASS.
  • Fixed some missing semi-colons in the TypeScript.
  • Fixed a fault that caused the binding option "showOpeningClosingSquaredBrackets" to be ignored.
  • Fixed a fault that caused the data type label to be shown next to the "There are no properties to view." text.
  • Fixed some missing data types, and incorrect variable types.
  • Fixed a fault that caused the array paging system to fail when showing data obtained from a URL source.


Version 4.0.0:

New Features:

  • Added paging column support! This will allow you to view multiple array pages on one page, with column reordering reordering support!
  • Added HTML type support (shown as an object, and can be viewed as a parent/array item)!
  • Added Lambda type support (this still shows as a function, but the type is now different, allowing additional filtering)!
  • Enter support in bulk editing! This will allow new entries to be added (you must use CTRL/CMD + Enter instead to confirm the changes)!
  • Added a footer bar! This will show the current page information, value sizes (in B, KB, MB, etc) and additional information (only shown in full-screen mode).
  • Added support to delete array pages (when enabled) via bulk editing!
  • Added a new contents control panel! This sits in the top-right, and allows quick access to moving, removing, bulk editing, etc.
  • Added new public functions that will allow the binding options for instances to be updated!
  • RegExp, Symbol, and Image values can now be edited!
  • Added support to filter only on data types available, along with showing the total count of each kind on the display.
  • Added Vietnamese language translation support.

Binding Options:

  • BREAKING: Renamed the binding option "showCounts" to "showObjectSizes".
  • BREAKING: Renamed the binding option "showTypes" to "showDataTypes".
  • BREAKING: Renamed the binding option "title.showTreeControls" to "title.showCloseOpenAllButtons".
  • BREAKING: Removed the binding option "copyOnlyCurrentPage".
  • Added a new binding option category called "paging".
  • Added a new binding option called "paging.enabled" (defaults to false), which states if paging is enabled (replaces "showArrayItemsAsSeparateObjects").
  • Added a new binding option called "paging.columnsPerPage" (defaults to 1, maximum of 6), which states how page columns (array items) to show for each page.
  • Added a new binding option called "paging.startPage" (defaults to 1), which states which page to start on when array paging is enabled.
  • Added a new binding option called "paging.synchronizeScrolling" (defaults to false), which states if the paging columns should synchronize their scroll positions.
  • Added a new binding option called "paging.allowColumnReordering" (defaults to true), which states if the columns can be reordered when editing is enabled.
  • Added a new binding option category called "footer".
  • Added a new binding option called "footer.enabled" (defaults to true), which states if the footer bar should be shown (in full-screen mode).
  • Added a new binding option called "footer.showDataTypes" (defaults to true), which states if the footer bar should show the value data types.
  • Added a new binding option called "footer.showLengths" (defaults to true), which states if the footer bar should show the key/value length.
  • Added a new binding option called "footer.showSizes" (defaults to true), which states if the footer bar should show the key/value sizes.
  • Added a new binding option called "footer.showPageOf" (defaults to true), which states if the footer bar should show the "Page x of y" text.
  • Added a new binding option called "footer.statusResetDelay" (defaults to 5000 milliseconds), which states how long the status notification text should be visible for.
  • Added a new binding option category called "controlPanel".
  • Added a new binding option called "controlPanel.enabled" (defaults to true), which states if the panel is enabled.
  • Added a new binding option called "controlPanel.showCopyButton" (defaults to true), which states if the copy button should be visible.
  • Added a new binding option called "controlPanel.showMovingButtons" (defaults to true), which states if the moving buttons should be visible.
  • Added a new binding option called "controlPanel.showRemoveButton" (defaults to false), which states if the remove button should be visible.
  • Added a new binding option called "controlPanel.showEditButton" (defaults to true), which states if the edit button should be visible.
  • Added a new binding option called "controlPanel.showCloseOpenAllButtons" (defaults to true), which states if the open/close all buttons should be visible.
  • Added a new binding option called "controlPanel.showSwitchToPagesButton" (defaults to true), which states if the switch to pages buttons should be visible.
  • Added a new binding option called "autoClose.htmlSize" (defaults to 0), which states the size an HTML object has to be before it's closed on the first load.
  • Added a new binding option called "sideMenu.showAvailableDataTypeCounts" (defaults to true), which shows the total count for each data item on display next to the checkbox text.
  • Added a new binding option called "sideMenu.showOnlyDataTypesAvailable" (defaults to false), which states that only the data types on display should be shown as filter checkboxes.
  • Added a new binding option called "maximumUrlLength" (defaults to 0, state will use the full Url), which states the maximum size a Url can be in the display.
  • Added a new binding option called "maximumEmailLength" (defaults to 0, state will use the full Email), which states the maximum size an Email can be in the display.
  • Added a new binding option called "minimumArrayIndexPadding" (defaults to 0), which states the minimum number of padding zeros that should be used on array indexes.
  • Added a new binding option called "arrayIndexPaddingCharacter" (defaults to "0"), which states the padding character that should be used for array indexes.
  • Added a new binding option called "ignore.htmlValues" (defaults to false), which states if HTML values should be ignored.
  • Added a new binding option called "ignore.lambdaValues" (defaults to false), which states if lambda values should be ignored.
  • The binding option "sideMenu.titleText" now defaults to whatever "title.text" is set to (will prevent having to set this twice).
  • Added a new binding option called "showCssStylesForHtmlObjects" (defaults to false), which states if the CSS styles should be shown for an HTML object.
  • Added a new binding option called "jsonPathAny" (defaults to ".."), which states the characters that should be used to define an "any" path.
  • Added a new binding option called "jsonPathSeparator" (defaults to "\"), which states the separator to use for JSON paths.
  • Added a new binding option called "showChildIndexes" (defaults to true), which states if the child array/set indexes should be shown.
  • The binding option "showCommas" now defaults to true.
  • Added a new binding option called "allowEditing.regExpValues" (defaults to true), which states if RegExp values can be edited.
  • Added a new binding option called "allowEditing.symbolValues" (defaults to true), which states if Symbol values can be edited.
  • Added a new binding option called "allowEditing.imageValues" (defaults to true), which states if Image values can be edited.

Binding Options - Custom Triggers:

  • BREAKING: Every custom trigger must now accept the main JsonTree.js element as the first parameter, so you can identify which element the event came from.
  • Added a new binding option custom trigger called "onLambdaRender", which fires an event when a lambda value is rendered (allow element render overrides).
  • Added a new binding option custom trigger called "onFullScreenChange", which fires an event when the full-screen mode is changed (passes a flag to state if it's on).

Configuration Options:

  • BREAKING: Renamed "text.copyAllButtonSymbolText" to "text.copyButtonSymbolText".
  • Changed the EN default for the option "text.showTypesText" to "Show Data Types", and renamed it to "text.showDataTypesText".
  • Added a new option called "text.htmlText", which states the text to use for the html types (defaults to "html").
  • Added a new option called "text.waitingText", which states the text to use in the footer main status area when waiting (defaults to "Waiting...").
  • Added a new option called "text.pageOfText", which states the text to use in the footer for the array page index (defaults to "Page {0} of {1}").
  • Added a new option called "text.sizeText", which states the text to use in the footer for the value size (defaults to "Size: {0}").
  • Added a new option called "text.copiedText", which states the status text to use in the footer when the JSON is copied (defaults to "JSON copied to clipboard.").
  • Added a new option called "text.exportedText", which states the status text to use in the footer when the JSON is exported (defaults to "JSON exported.").
  • Added a new option called "text.importedText", which states the status text to use in the footer when JSON files are imported (defaults to "{0} JSON files imported.").
  • Added a new option called "text.ignoreDataTypesUpdated", which states the status text to use in the ignore data types is updated (defaults to "Ignore data types updated.").
  • Added a new option called "text.lengthText", which states the text to use in the footer for the length of the value (defaults to "Length: {0}").
  • Added a new option called "text.valueUpdatedText", which states the status text to use when a value is updated (defaults to "Value updated.").
  • Added a new option called "text.jsonUpdatedText", which states the status text to use when the JSON is updated (defaults to "JSON updated.").
  • Added a new option called "text.nameUpdatedText", which states the status text to use when a property name is updated (defaults to "Property name updated.").
  • Added a new option called "text.indexUpdatedText", which states the status text to use when an array index is updated (defaults to "Array index updated.").
  • Added a new option called "text.itemDeletedText", which states the status text to use when an item is deleted (defaults to "Item deleted.").
  • Added a new option called "text.arrayJsonItemDeleted", which states the status text to use when a JSON page is deleted (defaults to "Array JSON item deleted.").
  • Added a new option called "text.dataTypeText", which states the text to use in the footer for the values data type (defaults to "Data Type: {0}").
  • Added a new option called "text.editSymbolButtonText", which states the symbol text to use for the edit control button (defaults to "✎").
  • Added a new option called "text.editButtonText", which states the text to use for the edit control button (defaults to "Edit").
  • Added a new option called "text.moveRightSymbolButtonText", which states the symbol text to use for the move right control button (defaults to "→").
  • Added a new option called "text.moveRightButtonText", which states the text to use for the move right control button (defaults to "Move Right").
  • Added a new option called "text.moveLeftSymbolButtonText", which states the symbol text to use for the move left control button (defaults to "←").
  • Added a new option called "text.moveLeftButtonText", which states the text to use for the move left control button (defaults to "Move Left").
  • Added a new option called "text.removeSymbolButtonText", which states the symbol text to use for the remove control button (defaults to "✕").
  • Added a new option called "text.removeButtonText", which states the text to use for the remove control button (defaults to "Remove").
  • Added a new option called "text.switchToPagesSymbolText", which states the symbol text to use for the switch to pages control button (defaults to "☷").
  • Added a new option called "text.switchToPagesText", which states the text to use for the switch to pages control button (defaults to "Switch To Pages").

Public API Functions:

  • Added a new public function called "backPage()", which will force the display to move back a page (if array paging is enabled).
  • Added a new public function called "nextPage()", which will force the display to move forward a page (if array paging is enabled).
  • Added a new public function called "getPageNumber()", which will return the current array page number (if array paging is enabled).
  • Added a new public function called "updateBindingOptions()", which will update the binding options for a specific element.
  • Added a new public function called "getBindingOptions()", which will return the binding options for a specific element.

SASS/CSS/HTML:

  • Renamed the CSS class "span.count" to "span.size".
  • A new attribute called "data-jsontree-js-array-index" is now added when array paging is enabled (states the data array index for the JSON being shown).
  • A new attribute called "data-jsontree-js-path" is now added for each value (which states the full object/array path to the item and its value).
  • The default font weight used for all the text (that is not bold) has been decreased slightly to 300.
  • Color improvements to the "jsontree.js.light.theme.css" theme.

Improvements:

  • Date/Time string parsing must now be in the ISO UTC format (it will be ignored otherwise).
  • The "There are no properties to view." text is now shown for all objects, maps, arrays, and sets when their properties/items are all filtered out (or simply empty).
  • The "Image" type value is now aligned in the middle of the row vertically.
  • When the "Export" or "Import" button is pressed on the "Side Menu" title bar, the side menu is now closed.
  • When the ignore data type filters are updated in the "Side Menu", the side menu is now closed correctly before the UI is updated.
  • Array indexes and keys can now be edited when key/value tooltips are set (which also allows bulk editing to be used).
  • The "Null" and "Undefined" types in the display are now shown in uppercase and a bold font-weight.
  • Improved the style used for the comas (when enabled) so they stand out a little more.
  • Updated to the latest versions for the NPM packages.
  • Added additional spacing around the ellipsis used for Strings, Emails, and URLs and a maximum length binding option has been set.
  • Added support to convert strings to BigInts (if "stringsToNumbers" is enabled) and the string ends with an "n".
  • When "showOpeningClosingCurlyBraces" and "showOpeningClosingSquaredBrackets" are enabled, if a node is closed, closed brackets/brackets are now shown (like "{ ... }" and "[ ... ]").
  • When the "There is currently no JSON to view." text is shown, a new "Import..." link is now available so that you can quickly import files (if enabled via the side menu).
  • Keys, Indexes, and Values inside Maps and Sets can no longer be edited (unless the value is an object or array).
  • When editing a boolean value, only valid values are now accepted (anything that is not "true" or "false" leaves the original value in place).
  • When editing a value, the text field now has a minimum and maximum width and can be scrolled. This will prevent very large values from making very large text fields.

Fixes:

  • Fixed a fault that caused an opening brace/squared brace symbol to be shown for objects that have no properties to view.
  • Fixed a fault that caused the scroll position for the content to go back to the top when editing an item, or changing the filters (when in full-screen mode).
  • Fixed a fault that caused the tooltip to stay open when toggling between full-screen views.
  • Fixed a fault that caused the value tooltips to remain open in full-screen mode when the contents are scrolled.
  • Fixed some comparison data issues that caused strict checks not to be used.
  • Fixed a fault that caused the filter checkboxes to report node errors in the developer console.
  • Fixed a fault that caused the entire control to become unusable when there is no data to show.
  • Fixed a fault that caused empty arrays to show up as "unknown" values (with no text).
  • Fixed a fault that caused the checkbox colors to not show correctly (missing var).
  • Fixed a fault that caused the checkbox check marks to appear in the slightly wrong position.
  • Fixed a script error that would occur when editing a value with invalid characters.
  • Fixed a fault that caused the "open" button shown next to URL/Email values to remain visible when the value is being edited.
  • Fixed some spacing issues around the opening brace/bracket symbols.
  • Fixed a fault that caused bulk editing to activate when clicking quickly on the opened/closing arrows.
  • Fixed a fault that caused the ":" separator to now be shown for base objects when "showArrayIndexBrackets" is set to false.
  • Fixed a fault that caused the ":" separator (shown for base objects) to not use the text from the configuration setting "text.propertyColonCharacter".


Version 3.1.1:

  • Added more details to the README files.
  • Added missing translations to all files.
  • Fixed a fault that caused counts for Objects/Maps to be still shown when the binding option "showCounts" is set to false.
  • Fixed a fault that prevented the ellipsis text from being applied to a string correctly when the binding option "maximumStringLength" is set.
  • Fixed a fault that caused the ellipsis text version of a string value to be passed to the binding options event "events.onValueClick".
  • Changed the default value for the binding options "showPropertyNameQuotes" to true.


Version 3.1.0:

New Features:

  • Added URL support for the "data" binding option!
  • Added URL/Email opening support!

Configuration Options:

  • Added a new option called "text.propertyColonCharacter", which states the character to use to split up the property name/index and value (defaults to ":").

Binding Options:

  • The binding option "ignore.emptyObjects" now defaults to false.
  • The binding option "data" will now accept a URL to a JSON file.
  • Added a new binding option called "showUrlOpenButtons" (defaults to true), which states if a URL can be opened in a new window.
  • Added a new binding option called "showEmailOpenButtons" (defaults to true), which states if an Email can be opened in the default email editor.

UI Improvements:

  • Undefined and Null values now appear more clearly when "showValueColors" is turned on.
  • When a value is a function and has a name, the text "function" is now shown at the start of the value.
  • When the binding option "ignore.emptyObjects" is set to false, objects that are empty show a zero count, and a new notice text label is shown under the header.

Configuration Options:

  • Added a new option called "text.noPropertiesText", which states the text to show when no properties are available for an object/map (defaults to "There are no properties to view.").
  • Added a new option called "text.openText", which states the open button text to show next to a URL/Email (defaults to "open").
  • Added a new option called "text.openSymbolText", which states the open button symbol text to show next to a URL/Email (defaults to "⤤").

Improvements:

  • Updates to the README files to make the features stand out.

Fixes:

  • Fixed a CSS fault that caused the checkboxes to be centred in the Side Menu.


Version 3.0.0:

New Features:

  • BREAKING: The type "decimal" has been renamed to "float" (including supporting binding options).
  • Added URL, Image and Email type support!
  • Added support to show the object types in the UI (next to the property name/array index, off by default)!
  • Added support to show speech marks around the property names (off by default).
  • Added support to show object/array contents opened borders (on by default).
  • Added a new Side Menu (opened from the title bar, on by default), which allows the ignore configuration to be changed for the display.
  • Added a new button (to the side menu, on by default) that will allow you to import a list of JSON files.
  • Added a new button (to the side menu, on by default) that will allow you to export all the JSON being viewed to a file.
  • Added a new title bar button that will allow you to quickly toggle the full-screen mode (on by default).
  • Added array index editing support!
  • Added a massively improved drag-and-drop UI!
  • Added bulk JSON editing support!
  • Added property name and array index parent color support (on by default).
  • Added auto-close data types by size support (supports Objects, Arrays, Maps, and Set).

Shortcut Navigation Keys:

  • Pressing Ctrl/Command + F11 will toggle the full-screen mode.

Binding Options:

  • BREAKING: Removed the binding option "title.show", as "title.text" will now accept an empty string instead.
  • BREAKING: Moved the binding option "enableFullScreenToggling" to "title.enableFullScreenToggling".
  • BREAKING: Renamed the new binding option "copyIndentSpaces" to "jsonIndentSpaces" (now defaults to 8).
  • Added a new binding option called "ignore.urlValues" (defaults to false), which states if URL values should be ignored.
  • Added a new binding option called "ignore.imageValues" (defaults to false), which states if Image values should be ignored.
  • Added a new binding option called "ignore.emailValues" (defaults to false), which states if Email values should be ignored.
  • Added a new binding option called "allowEditing.urlValues" (defaults to true), which states if URL values can be edited.
  • Added a new binding option called "allowEditing.emailValues" (defaults to true), which states if Email values can be edited.
  • Added a new binding option called "showTypes" (defaults to false), which states if the type of each object should be shown in the display.
  • Added a new binding option called "logJsonValueToolTipPaths" (defaults to false), which states if the JSON value tooltips paths should be logged to the console.
  • Added a new binding option called "sideMenu.enabled" (defaults to true), which states if the side menu should be shown.
  • Added a new binding option called "sideMenu.showImportButton" (defaults to true), which states if the import button is shown.
  • Added a new binding option called "sideMenu.showExportButton" (defaults to true), which states if the export button is shown.
  • Added a new binding option called "sideMenu.titleText" (defaults to "JsonTree.js"), which states the side menu title bar text to use (can be blank, if required).
  • Added a new binding option called "title.showFullScreenButton" (defaults to true), which states if the full-screen button is shown.
  • Added a new binding option called "allowEditing.bulk" (defaults to true), which states if bulk editing (editing the whole JSON) is enabled.
  • The binding option called "openInFullScreenMode" will now force the UI to open in full-screen mode (even if "title.enableFullScreenToggling" is set to false).
  • Added a new binding option called "exportFilenameFormat" (defaults to "JsonTree{dd}-{mm}-{yyyy}{hh}-{MM}-{ss}.json"), which states the export filename format.
  • Added a new binding option called "showPropertyNameQuotes" (defaults to false), which states if speech marks should be shown around the property names.
  • Added a new binding option called "showOpenedObjectArrayBorders" (defaults to true), which states if the object/array contents should show the opened borders.
  • Added a new binding option called "showPropertyNameAndIndexColors" (defaults to true), which states if the object/array names/index should show the parent's color.
  • Added a new binding option called "autoClose.objectSize" (defaults to 0), which states the size an object has to be before it's closed on the first load.
  • Added a new binding option called "autoClose.arraySize" (defaults to 0), which states the size an array has to be before it's closed on the first load.
  • Added a new binding option called "autoClose.mapSize" (defaults to 0), which states the size a map has to be before it's closed on the first load.
  • Added a new binding option called "autoClose.setSize" (defaults to 0), which states the size a set has to be before it's closed on the first load.

Binding Options - Custom Triggers:

  • Added a new binding option custom trigger called "onUrlRender", which fires an event when a URL value is rendered (allow element render overrides).
  • Added a new binding option custom trigger called "onImageRender", which fires an event when an Image value is rendered (allow element render overrides).
  • Added a new binding option custom trigger called "onEmailRender", which fires an event when an Email value is rendered (allow element render overrides).
  • Added a new binding option custom trigger called "onExport", which fires an event when the JSON is exported.

Configuration Options:

  • Added a new option called "text.sideMenuButtonSymbolText", which states the symbol text to use for the side menu button (defaults to "☰").
  • Added a new option called "text.sideMenuButtonText", which states the text to use for the side menu button (defaults to "Show Menu").
  • Added a new option called "text.closeButtonSymbolText", which states the symbol text to use for the close button (defaults to "✕").
  • Added a new option called "text.closeButtonText", which states the text to use for the close button (defaults to "Close").
  • Added a new option called "text.showTypesText", which states the text to use for the show types header (defaults to "Show Types").
  • Added a new option called "text.selectAllText", which states the text to use for the select all button (defaults to "Select All").
  • Added a new option called "text.selectNoneText", which states the text to use for the select none button (defaults to "Select None").
  • Added a new option called "text.importButtonSymbolText", which states the symbol text to use for the import button (defaults to "↑").
  • Added a new option called "text.importButtonText", which states the text to use for the import button (defaults to "Import").
  • Added a new option called "text.fullScreenOnButtonSymbolText", which states the symbol text to use for the toggle full-screen on button (defaults to "↗").
  • Added a new option called "text.fullScreenOffButtonSymbolText", which states the symbol text to use for the toggle full-screen off button (defaults to "↙").
  • Added a new option called "text.fullScreenButtonText", which states the text to use for the toggle full-screen button (defaults to "Toggle Full-Screen").
  • Changed the default value of the option "text.closeAllButtonSymbolText" to "⇈".
  • Changed the default value of the option "text.openAllButtonSymbolText" to "⇊".
  • Added a new option called "text.copyButtonText", which states the text to use for the copy button (defaults to "Copy").
  • Added a new option called "text.dragAndDropSymbolText", which states the symbol text to use for the drag & drop title (defaults to "⇪").
  • Added a new option called "text.dragAndDropTitleText", which states the text to use for the drag & drop title (defaults to "Drag and drop your JSON files to upload").
  • Added a new option called "text.dragAndDropDescriptionText", which states the text to use for the drag & drop description (defaults to "Multiple files will be joined as an array").
  • Added a new option called "text.exportButtonSymbolText", which states the symbol text to use for the export button (defaults to "↓").
  • Added a new option called "text.exportButtonText", which states the text to use for the export button (defaults to "Export").

UI Improvements:

  • When there is no content to view due to the ignore rules, the "There is currently no JSON to view." message is now shown.

Fixes:

  • Fixed a fault that caused the Back/Next buttons to not be visible in the title bar when everything else is turned off.
  • Fixed a fault that prevented the border from being removed from the container when full-screen mode was on.
  • Fixed a fault that caused the UI to move to the previous/next page when using the arrow keys in an editable box.
  • Fixed the documentation that listed the wrong type names.
  • Fixed a fault that caused Maps, Weak Maps, Sets, Weak Sets, and RegExp values to be excluded when pressing the "Copy" button.
  • Fixed a global result fault to occur when removing the squared brackets from a number.
  • Fixed the binding option "addArrayIndexPadding" not working when set to true.


Version 2.9.0:

New Features:

  • Added RegExp type support!
  • Added Map/WeakMap type support!
  • Added Set/WeakSet type support!
  • Added multiple file-dropping support!

Binding Options:

  • Added a new binding option called "ignore.regExpValues" (defaults to false), which states if RegExp values should be ignored.
  • Added a new binding option called "ignore.mapValues" (defaults to false), which states if Map values should be ignored.
  • Added a new binding option called "ignore.setValues" (defaults to false), which states if Map values should be ignored.
  • The binding option "allowEditing" can now accept a boolean again to enable/disable all supported editable types (you can still pass them individually if required).
  • Added {fff} (milliseconds padded to 3 places) and {ff} (milliseconds padded to 2 places) support for the "dateTimeFormat" option.

Binding Options - Custom Triggers:

  • Added a new binding option custom trigger called "onRegExpRender", which fires an event when a RegExp value is rendered (allow element render overrides).

Configuration Options:

  • Added a new option called "text.mapText", which states the text to use for the map types (defaults to "map").
  • Added a new option called "text.setText", which states the text to use for the set types (defaults to "set").

UI Improvements:

  • The property name now also shows a tooltip, if available via the "valueToolTips" binding option.
  • The label "There is currently no JSON to view." is now centred in the screen when full-screen mode is turned on.

General Improvements:

  • Added an ignore path for ".DS_Store" files when packing the NuGet package.
  • Updated to the latest version of the NPM packages.

Fixes:

  • Fixed a fault that prevented NPM packages from being updated correctly.
  • Fixed the "Frisian" translation file missing some text.
  • Fixed a fault that caused the wrong type to be passed when clicking an Array type (when shown as the main object).
  • Fixed a fault that caused the closing symbols to show in the wrong position when the binding option "showArrowToggles" is set to false.
  • Fixed a fault that prevented the Open/Close All buttons from working when the binding option "showArrowToggles" is set to false.
  • Fixed a fault that caused zero padding to be used for the contents at the top when the title bar was not visible.
  • Fixed a fault that caused the title bar text to be centred when no data was available to be shown.
  • Fixed the title bar buttons not using the correct spacing.
  • Fixed the title bar text not using the correct margins when no data is available to be shown.
  • Fixed a missing space that is not being shown for the paging object index title.
  • Fixed a fault that caused the title bar buttons to appear in different sizes (if the default font is not available).
  • Fixed the missing colors in the theme files.
  • Fixed a fault that prevented additional margins for the last items in the display from being removed.


Version 2.8.1:

Binding Options:

  • Added a new binding option called "tooltip.offset" (defaults to 0), which states the additional offset to use for the tooltip position.
  • Added a new binding option called "editingValueClickDelay" (defaults to 500), which states how long an editable value should wait after being clicked to trigger the custom event.

General Improvements:

  • The value tooltips now take the "useZeroIndexingForArrays" binding option into account when mapping the path.
  • Added "..\" support for tooltip values, which will allow specific names/indexes to be ignored so that the same tooltip can be set for multiple array object properties.
  • Tooltips shown for JSON values now use a new CSS class called "jsontree-js-tooltip-value" (by default, it looks like the regular tooltip).

Fixes:

  • When "destroy()" is called, the tooltip element is removed from the DOM.


Version 2.8.0:

New Features:

  • Added value tooltip support (property names cannot be edited with this set)!

Binding Options:

  • Added a new binding option called "valueToolTips" (defaults to {}), which states the JSON paths to set tooltips for the values.
  • Added a new binding option called "allowEditing.propertyNames" (defaults to true), which states the JSON property named can be edited.

Binding Options - Custom Triggers:

  • Added a new binding option custom trigger called "onJsonEdit", which fires when a JSON property name/value is edited.

Fixes:

  • Fixed a fault that caused parsing values to render in the wrong type!
  • Fixed a fault that caused some of the new editing values to be ignored.


Version 2.7.0:

New Features:

  • Added GUID type support!
  • Color type support is now implemented fully!
  • Allow editing can now be set for specific object types, instead of all of them!
  • Added navigation shortcut key support (when only one instance is created in the UI)!
  • Added full-screen support!

Navigation Shortcut Keys:

  • Added "Left" key support, which will move back a page (if arrays are paged).
  • Added "Right" key support, which will move a page forward (if arrays are paged).
  • I added "Down" key support, which will open all the nodes on the display.
  • Added "Up" key support, which will close all the nodes on the display.

Binding Options:

  • Added a new binding option called "ignore.guidValues" (defaults to false), which states if GUID values should be ignored.
  • Added a new binding option called "ignore.colorValues" (defaults to false), which states if color values should be ignored.
  • Removed the binding option "showStringHexColors" (not needed anymore).
  • BREAKING: The binding option "allowEditing" now allows you to state which object types you can edit (for example, allowEditing.booleanValues).
  • Added a new binding option called "allowEditing.booleanValues" (defaults to true), which states if boolean values can be edited.
  • Added a new binding option called "allowEditing.decimalValues" (defaults to true), which states if decimal values can be edited.
  • Added a new binding option called "allowEditing.numberValues" (defaults to true), which states if number values can be edited.
  • Added a new binding option called "allowEditing.stringValues" (defaults to true), which states if string values can be edited.
  • Added a new binding option called "allowEditing.dateValues" (defaults to true), which states if date values can be edited.
  • Added a new binding option called "allowEditing.bigIntValues" (defaults to true), which states if big int values can be edited.
  • Added a new binding option called "allowEditing.guidValues" (defaults to true), which states if GUID values can be edited.
  • Added a new binding option called "allowEditing.colorValues" (defaults to true), which states if color values can be edited.
  • Added a new binding option called "includeTimeZoneInDateTimeEditing" (defaults to true), which states if editing a date/time should include the timezone information.
  • Added a new binding option called "openInFullScreenMode" (defaults to false), which states if the UI should be shown in full-screen mode.
  • Added a new binding option called "enableFullScreenToggling" (defaults to true), which states if full-screen toggling is enabled (double-clicking the title bar).

Binding Options - Custom Triggers:

  • Added a new binding option custom trigger called "onGuidRender", which fires an event when a GUID value is rendered (allow element render overrides).
  • Added a new binding option custom trigger called "onColorRender", which fires an event when a color value is rendered (allow element render overrides).

UI Improvements:

  • The title bar now has a new style, which helps to separate it from the rest of the control.

General Improvements:

  • The GUIDs generated now used the "crypto.randomUUID()" instead of the custom-built one (this is now RFC4122-compliant).
  • Improved the event assignments, which are now single lines.


Version 2.6.0:

New Features:

  • Added editing support! You can now edit property names and values while clearing the data will remove the item.

Binding Options:

  • Added a new binding option called "allowEditing" (defaults to true), which states if property name/value editing is allowed.

Binding Options - Custom Triggers:

  • When "onValueClick" is set, all HEX/RGB colors are now passed using a type of "color".

UI Improvements:

  • Strings that are RGB or RGBA colors are now shown as colors in the display (as with hex colors).
  • String HEX/RGB colors are now shown without the string quotes (if enabled).
  • Removed spacing around the fields and improved the margins.
  • The Array/Object contents opened/closed in the display are now remembered when switching between array pages (if turned on).

General Improvements:

  • Moved from ES2016 to ES2020.
  • Moved more code into the shared files.
  • When an ID is set for an element, it is removed when "destroy()" is called.
  • When an element is destroyed, if no classes are left on the element, the "class" attribute is now removed.


Version 2.5.0:

New Features:

  • Added lambda display support.
  • Added value-clicking support for Objects and Arrays!
  • Added translation support! A new folder called "translations" under "dist" has been added, with support for the following languages:
    1. af Afrikaans
    2. ar Arabic
    3. hy Armenian
    4. be Belarusian
    5. bn Bengali
    6. bg Bulgarian
    7. ca Catalan
    8. zh Chinese (simplified)
    9. da Danish
    10. nl Dutch
    11. en English (default)
    12. eo Esperanto
    13. et Estonian
    14. fa Farsi
    15. fi Finnish
    16. fr French
    17. fy Frisian
    18. gl Galician
    19. ka Georgian
    20. de German
    21. el Greek
    22. he Hebrew
    23. hi Hindi
    24. hu Hungarian
    25. is Icelandic
    26. id Indonesian
    27. ga Irish
    28. it Italian
    29. ja Japanese
    30. ko Korean
    31. lv Latvian
    32. lt Lithuanian
    33. lb Luxembourgish
    34. ms Malay
    35. ne Nepali
    36. no Norwegian
    37. pl Polish
    38. pt Portuguese
    39. ro Romanian
    40. si Sinhalese
    41. sk Slovak
    42. sl Slovenian
    43. es Spanish
    44. sv Swedish
    45. tl Tagalog
    46. ta Tamil
    47. zh-tw Taiwanese
    48. te Telugu
    49. th Thai
    50. tr Turkish
    51. uk Ukrainian

Configuration Options:

  • Added a new option called "text.functionText", which states the default text to show for a function (if using a lambda, defaults to "function").

UI Improvements:

  • Added a transition that is used for the contents when switching pages.
  • When "showValueColors" is set to false, the same font weights, and styles, are still applied to the titles and values.
  • When "showValueColors" is set to false, if a value click event is set, the hover effect for the values is now shown.


Version 2.4.0:

New Features:

  • Added undefined type support (shown instead of null, or unknown)!
  • Added two themes, the default, and a new light theme, under the "dist/themes".

Binding Options:

  • Added a new binding option called "showOpeningClosingCurlyBraces" (defaults to false), which states if opening/closing curly braces should be shown.
  • Added a new binding option called "showOpeningClosingSquaredBrackets" (defaults to false), which states if opening/closing curly brackets should be shown.
  • Added {ff} (milliseconds padded) and {f} (milliseconds) support for the "dateTimeFormat" binding option.

Binding Options - Custom Triggers:

  • Added a new binding option custom trigger called "onCopyJsonReplacer", which fires an event and gets the result that should be used for values when copying the JSON to the clipboard.

General Improvements:

  • Increased the font weight of the navigation buttons in the title bar (so they stand out more).
  • Minor refactoring of function names.
  • Huge improvements to the HTML testing files.
  • Updated the project to the latest NPM packages.


Version 2.3.0:

New Features:

  • Added custom tooltip support!
  • Added bigint type support!
  • Added symbol type support!
  • Added ignore empty objects support!
  • Added more parsing options!

Binding Options:

  • Added a new binding option called "tooltip.delay" (defaults to 750), which states how long to wait before showing a tooltip (in milliseconds).
  • Added a new binding option called "ignore.bigIntValues" (defaults to false), which states if bigint values should be ignored.
  • Added a new binding option called "ignore.symbolValues" (defaults to false), which states if symbol values should be ignored.
  • Added a new binding option called "ignore.emptyObjects" (defaults to true), which states if empty objects should be ignored.
  • Added a new binding option called "showArrayIndexBrackets" (defaults to true), which states if the array index brackets should be shown.
  • Moved to "parseStringsToDates" to "parse.stringsToDates".
  • Added a new binding option called "parse.stringsToBooleans" (defaults to false), which states if string values should be parsed to boolean values (if valid).
  • Added a new binding option called "parse.stringsToNumbers" (defaults to false), which states if string values should be parsed to number values (if valid).

Binding Options - Custom Triggers:

  • Added a new binding option custom trigger called "onBigIntRender", which fires an event when a bigint value is rendered (allow element render overrides).
  • Added a new binding option custom trigger called "onSymbolRender", which fires an event when a symbol value is rendered (allow element render overrides).

General Improvements:

  • Massively improved the sorting of object property names (now uses a collator to sort them correctly).
  • Added a new export enum called "DataType", which states all of the type names that will be returned when clicking a value.
  • Null values can now be clicked (if an event is available).
  • The "There is currently no JSON to view." text is now shown in a different color.
  • The "Copy" button will now ensure that functions, and other types, are included (they are converted to strings).

Fixes:

  • Fixed a fault that caused the wrong tooltips to be assigned to the title bar buttons.


Version 2.2.0:

New Features:

  • Added JSON file-dropping support! Simply drag and drop your JSON file onto the main display and watch it render!
  • Added string to Date() parsing!

Binding Options:

  • Added a new binding option called "fileDroppingEnabled" (defaults to true), which states if JSON files can be dropped onto the main display and shown.
  • Added a new binding option called "parseStringsToDates" (defaults to false), which states if string values should be parsed to Date() objects (if valid).
  • Added a new binding option called "copyIndentSpaces" (defaults to 2), which states the total spaces that should be used for the indentation when the JSON is copied.

Binding Options - Custom Triggers:

  • Added a new binding option custom trigger called "onBackPage", which fires an event when moving back a page (when showing arrays as pages).
  • Added a new binding option custom trigger called "onNextPage", which fires an event when moving forward a page (when showing arrays as pages).
  • Added a new binding option custom trigger called "onSetJson", which fires an event when the JSON data is changed.

Configuration Options:

  • Added a new option called "text.noJsonToViewText", which states the text to show when no JSON is available to view (defaults to "There is currently no JSON to view.").

Public API Functions:

  • Added a new public function called "setJSON()", which will set the display using the JSON object/string you pass.
  • Added a new public function called "getJSON()", which will return the JSON that is currently being displayed.

UI Improvements:

  • The contents (everything under the title bar) are now in their own container.
  • Added scrolling support for large content data.
  • The buttons in the title bar will no longer wrap to the next line when a smaller screen is used.

General Improvements:

  • Added configuration settings to force types to be declared.
  • Added missing type declarations.
  • Updated the project to the latest NPM packages.


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 :)