5.8 KiB
API Reference
JSONEditor
Constructor
JSONEditor(container [, options] [, json])
Constructs a new JSONEditor.
Parameters:
-
{Element} container
An HTML DIV element. The JSONEditor will be created inside this container element. -
{Object} options
Optional object with options. Available options:{Object} ace
Provide a custom version of the Ace editor and use this instead of the version that comes embedded with JSONEditor. Only applicable whenmode
iscode
.{function} change
Set a callback method triggered when the contents of the JSONEditor change. Called without parameters. Will only be triggered on changes made by the user, not in case of programmatic changes via the functionsset
orsetText
.{function} editable
Set a callback method to determine whether individual nodes are editable or read-only. Only applicable when optionmode
istree
. The callback is invoked aseditable(node)
, wherenode
is an object{field: string, value: string, path: string[]}
. The function must either return a boolean value to set both the nodes field and value editable or read-only, or return an object{field: boolean, value: boolean}
.{function} error
Set a callback method triggered when an error occurs. Invoked with the error as first argument. The callback is only invoked for errors triggered by a users action.{boolean} history
Enables history, adds a button Undo and Redo to the menu of the JSONEditor. True by default. Only applicable whenmode
is 'tree' or 'form'.{String} mode
Set the editor mode. Available values: 'tree' (default), 'view', 'form', 'code', 'text'. In 'view' mode, the data and datastructure is read-only. In 'form' mode, only the value can be changed, the datastructure is read-only. Mode 'code' requires the Ace editor to be loaded on the page. Mode 'text' shows the data as plain text.{String[]} modes
Create a box in the editor menu where the user can switch between the specified modes. Available values: see optionmode
.{String} name
Initial field name for the root node, is undefined by default. Can also be set usingJSONEditor.setName(name)
. Only applicable whenmode
is 'tree', 'view', or 'form'.{boolean} search
Enables a search box in the upper right corner of the JSONEditor. True by default. Only applicable whenmode
is 'tree', 'view', or 'form'.{Number} indentation
Number of indentation spaces. 2 by default. Only applicable whenmode
is 'code' or 'text'.{String} theme
Set the Ace editor theme, uses included 'ace/theme/jsoneditor' by default. Please note that only the default theme is included with jsoneditor, so if you specify another one you need to make sure it is loaded.
-
{JSON} json
Initial JSON data to be loaded into the JSONEditor. Alternatively, the methodJSONEditor.set(json)
can be used to load JSON data into the editor.
Returns:
{JSONEditor} editor
New instance of a JSONEditor.
Methods
JSONEditor.collapseAll()
Collapse all fields. Only applicable for mode 'tree', 'view', and 'form'.
JSONEditor.expandAll()
Expand all fields. Only applicable for mode 'tree', 'view', and 'form'.
JSONEditor.focus()
Set focus to the JSONEditor.
JSONEditor.set(json)
Set JSON data.
Parameters:
{JSON} json
JSON data to be displayed in the JSONEditor.
JSONEditor.setMode(mode)
Switch mode. Mode code
requires the Ace editor.
Parameters:
{String} mode
Available values:tree
, 'view',form
,code
,text
.
JSONEditor.setName(name)
Set a field name for the root node.
Parameters:
{String | undefined} name
Field name of the root node. If undefined, the current name will be removed.
JSONEditor.setText(jsonString)
Set text data in the editor.
Parameters:
{String} jsonString
Contents of the editor as string.
JSONEditor.get()
Get JSON data.
Returns:
{JSON} json
JSON data from the JSONEditor.
JSONEditor.getName()
Retrieve the current field name of the root node.
Returns:
{String | undefined} name
Current field name of the root node, or undefined if not set.
JSONEditor.getText()
Get JSON data as string.
Returns:
{String} jsonString
Contents of the editor as string. When the editor is in codetext
orcode
, the returned text is returned as-is. For the other modes, the returned text is a compacted string. In order to get the JSON formatted with a certain number of spaces, useJSON.stringify(JSONEditor.get(), null, 2)
.
Examples
A tree editor:
var options = {
"mode": "tree",
"search": true
};
var editor = new JSONEditor(container, options);
var json = {
"Array": [1, 2, 3],
"Boolean": true,
"Null": null,
"Number": 123,
"Object": {"a": "b", "c": "d"},
"String": "Hello World"
};
editor.set(json);
editor.expandAll();
var json = editor.get(json);
A text editor:
var options = {
"mode": "text",
"indentation": 2
};
var editor = new JSONEditor(container, options);
var json = {
"Array": [1, 2, 3],
"Boolean": true,
"Null": null,
"Number": 123,
"Object": {"a": "b", "c": "d"},
"String": "Hello World"
};
editor.set(json);
var json = editor.get();
JSON parsing and stringification
In general to parse or stringify JSON data, the browsers built in JSON parser can be used. To create a formatted string from a JSON object, use:
var formattedString = JSON.stringify(json, null, 2);
to create a compacted string from a JSON object, use:
var compactString = JSON.stringify(json);
To parse a String to a JSON object, use:
var json = JSON.parse(string);