<html>
<head>
<?php
$TITLE = "Tests";
include('style.php');
?>
</head>
<body>
<div class="content-wrapper">
<?php include('navbar.php'); ?>
<?php include('heading.php'); ?>
<div class="container">
<table>
<tr>
<td> <div id="json"> </div> </td>
<td> <div id="editor_holder"> </div> </td>
</tr>
</table>
<script>
var jsonSchema = { schema:
{
"title": "Person",
"type": "object",
"properties": {
"name": {
"type": "string",
"title": "Name",
"description": "First and Last name",
"minLength": 4,
"default": "Joe Blogs"
},
"age": {
"title": "Age",
"type": "integer",
"default": 25,
"minimum": 18,
"maximum": 99
},
"favorite_color": {
"type": "string",
"format": "color",
"title": "Favorite Color",
"default": "#ffa500"
},
"gender": {
"type": "string",
"title": "Gender",
"enum": [
"male",
"female"
]
},
"location": {
"type": "object",
"title": "Location",
"properties": {
"city": {
"title": "City",
"type": "string",
"default": "San Francisco"
},
"state": {
"title": "State",
"type": "string",
"default": "CA"
},
"citystate": {
"title": "City-State",
"type": "string",
"description": "This is generated automatically from the previous two fields",
"template": "{{city}}, {{state}}",
"watch": {
"city": "location.city",
"state": "location.state"
}
}
}
},
"pets": {
"type": "array",
"format": "table",
"title": "Pets",
"uniqueItems": true,
"items": {
"type": "object",
"title": "Pet",
"properties": {
"type": {
"title": "Type",
"type": "string",
"enum": [
"cat",
"dog",
"bird",
"reptile",
"other"
],
"default": "dog"
},
"name": {
"title": "Name",
"type": "string"
}
}
},
"default": [
{
"type": "dog",
"name": "Walter"
}
]
}
}
} };
var jsonValue =
{
"name": "John Ryland",
"age": 40,
"favorite_color": "#ffa500",
"gender": "male",
"location": {
"city": "San Francisco",
"state": "CA",
"citystate": "San Francisco, CA"
},
"pets": [
{
"type": "dog",
"name": "Walter"
}
]
};
$("#json").jsonView(jsonValue);
// Set default options
JSONEditor.defaults.options.theme = 'bootstrap2';
JSONEditor.defaults.options.iconlib = 'fontawesome4';
// Initialize the editor
var editor = new JSONEditor(document.getElementById("editor_holder"), jsonSchema);
editor.options.format = "grid";
// Set the value
editor.setValue(jsonValue);
// Get the value
var data = editor.getValue();
console.log(data.name); // "John Smith"
// Validate
var errors = editor.validate();
if (errors.length) {
// Not valid
}
// Listen for changes
editor.on("change", function() {
// Do something...
});
</script>
</div> <!-- end of container -->
</div> <!-- end of content-wrapper -->
<?php include('footer.php'); ?>
</body>
</html>
