Methods
Jedison provides several methods to interact with your editor instance:
getValue()
Returns the current value of the editor by calling getValue() on the root instance.
Internally, this traverses the entire instance tree to build the complete JSON structure.
const jedison = new Jedison.Create({
schema: {
type: 'object',
properties: {
name: { type: 'string' },
age: { type: 'integer' }
}
},
data: { name: 'Ada', age: 30 }
})
console.log(jedison.getValue())
// { name: 'Ada', age: 30 }
setValue(data)
Updates the editor's value with new data by calling setValue() on the root instance.
data: The new JSON data to set
const jedison = new Jedison.Create({
schema: {
type: 'object',
properties: {
name: { type: 'string' },
age: { type: 'integer' }
}
}
})
jedison.setValue({ name: 'Grace', age: 34 })
console.log(jedison.getValue())
// { name: 'Grace', age: 34 }
getInstance(path)
Retrieves a specific instance by its JSON Pointer.
Example paths:
'#'- Root instance'#/property'- Nested property'#/array/0'- First item in an array
const jedison = new Jedison.Create({
schema: {
type: 'object',
properties: {
address: {
type: 'object',
properties: {
street: { type: 'string' }
}
}
}
}
})
const streetInstance = jedison.getInstance('#/address/street')
console.log(streetInstance.getValue())
Programmatic Array Control
Every array instance retrieved via getInstance(path) exposes methods to add, remove, and reorder items directly, without going through the UI:
move(fromIndex, toIndex, initiator)- Moves an item from one index to anotheraddItem(initiator)- Appends a new item using the schema's default valueaddItemAfter(afterIndex, initiator)- Inserts a new item right after the given indexdeleteItem(itemIndex, initiator)- Removes the item at the given index
initiator is optional and defaults to 'api'. These are the same methods the UI's own add/delete/move buttons call internally, so they fire the same item-add/item-delete/item-move events documented on the Events page.
const jedison = new Jedison.Create({
schema: {
type: 'object',
properties: {
tags: {
type: 'array',
items: { type: 'string' }
}
}
}
})
const tagsInstance = jedison.getInstance('#/tags')
tagsInstance.addItem()
tagsInstance.addItemAfter(0)
tagsInstance.move(2, 0)
tagsInstance.deleteItem(1)
showValidationErrors(errorsList = null)
Displays validation errors in the respective editors.
- If
errorsListis provided, displays those specific errors - Otherwise, shows all current validation errors from
getErrors()
<form novalidate>
<div id="jedison-container"></div>
<button type="submit">Submit</button>
</form>
<script type="module">
const jedison = new Jedison.Create({
container: document.getElementById('jedison-container'),
theme: new Jedison.Theme(),
schema: {
type: 'object',
required: ['name'],
properties: {
name: { type: 'string' }
}
}
})
document.querySelector('form').addEventListener('submit', (event) => {
event.preventDefault()
jedison.showValidationErrors()
})
</script>
getErrors(filters = ['error'])
Returns an array of validation error messages from all instances.
filters: Include only errors withtypethat are included in the filter array
jedison.getErrors(['error', 'warning'])
[
{
"type": "error",
"path": "#",
"constraint": "minLength",
"messages": [
"Must be at least 4 characters long."
]
},
{
"type": "warning",
"path": "#",
"constraint": "x-my-constraint",
"messages": [
"Value should be equal to \"test\"."
]
}
]
jedison.getErrors(['error'])
[
{
"type": "error",
"path": "#",
"constraint": "minLength",
"messages": [
"Must be at least 4 characters long."
]
}
]
disable()
Disables UI controls
jedison.disable()
enable()
Enables UI controls
jedison.enable()
destroy()
Cleans up the editor instance by:
- Calling
destroy()on the root instance - Clearing the container HTML if in editor mode
- Removing all instance references
const jedison = new Jedison.Create({
container: document.getElementById('jedison-container'),
theme: new Jedison.Theme(),
schema: { type: 'object', properties: { name: { type: 'string' } } }
})
jedison.destroy()
navigateTo(path)
Navigates to a specific field by path, activating all ancestor nav and categories tabs as needed.
path: A JSON Pointer path string (e.g.'#/organization/departments/1/teams/1')
Only works when Jedison is used as an editor (i.e. a container is provided).
const jedison = new Jedison.Create({
container: document.getElementById('jedison-container'),
theme: new Jedison.Theme(),
schema: {
type: 'object',
'x-format': 'nav-vertical',
properties: {
organization: {
type: 'object',
'x-format': 'nav-vertical',
properties: {
name: { type: 'string' }
}
}
}
}
})
jedison.navigateTo('#/organization/name')