Here are some schema examples to achieve fairly complex data structures.
.. seealso:: `Live Demos & Playground <https://bhch.github.io/react-json-form/playground/>`__
This example shows how you can use JSON to store menu items for your website.
First let's look at the expected data structure:
// Data (javascript/json)
[
{'label': 'Home', 'link': '/', 'new_tab': false},
{'label': 'About', 'link': '/about/', 'new_tab': false},
{'label': 'Twitter', 'link': 'https://twitter.com/', 'new_tab': true},
]
And here's the corresponding schema for obtaining the above data:
# Schema
{
'type': 'list',
'items': {
'type': 'dict',
'keys': {
'label': {
'type': 'string'
},
'link': {
'type': 'string'
},
'new_tab': {
'type': 'boolean',
'title': 'Open in new tab'
}
}
}
}
A menu item can either be a link or a dropdown containing multiple links as its children.
You can recursively nest an object within itself using the $ref
keyword. See docs
on :ref:`referencing schema` for details:
# Schema
{
'type': 'list',
'items': {
'type': 'dict',
'keys': {
'label': {
'type': 'string'
},
'link': {
'type': 'string'
},
'new_tab': {
'type': 'boolean',
'title': 'Open in new tab'
},
'children': {
'$ref': '#'
}
}
}
}
This example shows you how you can store an image slider in JSON.
First, let's look at the expected data structure:
// Data (javascript/json)
[
{
'image': 'images/slide-1.png',
'heading': 'This is slide 1',
'caption': 'This is a caption',
'button': {
'label': 'Sign up',
'link': '/sign-up/'
}
},
{
'image': 'images/slide-2.png',
'heading': 'This is slide 2',
'caption': 'This is another caption',
'button': {
'label': 'Learn more',
'link': '/learn-more/'
}
}
]
And here's the corresponding schema for obtaining the above data:
# Schema
{
'type': 'list',
'items': {
'type': 'dict',
'keys': {
'image': {
'type': 'string',
'format': 'file-url'
},
'heading': {
'type': 'string'
},
'caption': {
'type': 'string'
},
'button': {
'type': 'object',
'keys': {
'label': {
'type': 'string'
},
'link': {
'type': 'string'
}
}
}
}
}
}