88 lines
1.7 KiB
HTML
88 lines
1.7 KiB
HTML
<!DOCTYPE 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>
|