jsoneditor/docs/api.md

# 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 when `mode` 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 option `mode`.
  - `{String} name`.
    Initial field name for the root node, is undefined by default.
    Can also be set using `JSONEditor.setName(name)`.
    Only applicable when `mode` is 'tree', 'view', or 'form'.
  - `{boolean} search`.
    Enables a search box in the upper right corner of the JSONEditor.
    True by default.
    Only applicable when `mode` is 'tree', 'view', or 'form'.
  - `{Number} indentation`.
    Number of indentation spaces. 2 by default.
    Only applicable when `mode` is 'code' or 'text'.

- `{JSON} json`
  Initial JSON data to be loaded into the JSONEditor. Alternatively, the method `JSONEditor.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](http://ace.ajax.org/).

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

```js
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:

```js
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:

```js
var formattedString = JSON.stringify(json, null, 2);
```

to create a compacted string from a JSON object, use:

```js
var compactString = JSON.stringify(json);
```

To parse a String to a JSON object, use:

```js
var json = JSON.parse(string);
```