4.5 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:{function} change
. Set a callback method triggered when the contents of the JSONEditor change. Called without parameters.{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'.
-
{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.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 formatter.
Parameters:
{String} jsonString
Contents of the JSONformatter 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 JSONformatter as string.
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);
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);