jsoneditor
Version:
A web-based tool to view, edit, format, and validate JSON
88 lines (79 loc) • 1.75 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSONEditor | Sync Node Expand</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
#jsoneditor-left {
width: 45%;
height: 90%;
float: left;
margin-left: 2%;
}
#jsoneditor-right {
width: 45%;
height: 90%;
float: right;
margin-right: 2%;
}
</style>
</head>
<body>
<div>
<div id="jsoneditor-left"></div>
<div id="jsoneditor-right"></div>
</div>
<script>
const left_json = {
'student_details': {
'name': {
'first_name': 'foo',
'last_name': 'bar'
},
'school': {
'name': 'foo',
'address': 'bar'
},
'contact': '434343',
'age': '39'
},
'marks': [50, 49, 36]
}
const right_json = {
'marks': [50, 49],
'student_details': {
'name': 'foo bar',
'address': {
'street': 'foo',
'city': 'bar',
'zip': '444444'
},
'school': {
'name': 'foo',
'address': 'bar'
},
'age': '39',
'contact': ['434355', '343433', '324343']
}
}
const editor_left = new JSONEditor(document.getElementById('jsoneditor-left'), {
mode: "tree",
onExpand: (options) => {
if (editor_right) {
editor_right.expand(options)
}
}
}, left_json)
const editor_right = new JSONEditor(document.getElementById('jsoneditor-right'), {
mode: "tree",
onExpand: (options) => {
if (editor_left) {
editor_left.expand(options)
}
}
}, right_json)
</script>
</body>
</html>