JSON Editor Implementation Code _json

You can enter or paste some JSON data to verify that it is correct.
Press the TAB key to automatically format the full text indent.


JSON Editor
Core code

Copy Code code as follows:

<script type= "Text/javascript" ><!--
/*
Main Object
*/
je={
data:{},/* Associated Data * *
code:false,/* Formatted Code * *
oldcode:[],/* History Code * *
editui:null,/* Association edit box *
msgui:null,/* Information Display window * *
treeui:null,/* Tree Window * *
Name: ' JE ',/* Instance Name * *
Root: ' <b>json </b> ',/* root node Header/*
checkbox:0,/* whether or not to add a duplicate box *
hot:null,/* Selected Node * *
Indent: ', * * indent character ' \ t ' or 4 ' *
firstup:true,/* for the first time automatic refresh *
onclick:array,/* Tree Click Notice *
Countinfo: ", * * statistical information * *
formating:false,/* format (no refactoring tree)
ico:{/* Tree Icon * *
Folder structure lines
R0: ' img?uuid=20166b3094daba4bc6e18817b8301b093a ',
r0c: ' Img?uuid=208018827ed877e31810e838d33e4ac2b0 ',
R1: ' Img?uuid=2094c793496278bde84be80bb6cb2117f5 ',
r1c: ' Img?uuid=205f2329c537dcfd32b5f33bf642f76fa6 ',
R2: ' Img?uuid=20af62be7c197cae64d3e533f7aaf28c25 ',
R2C: ' img?uuid=20a005983863e5bc8544cecd8b7f82fcdb ',
Prefix picture
NL: ' IMG?UUID=20F508BDC9BB8D98F4529E0FA2475B91BB ',
VL: ' img?uuid=20d5de63f4e6927bbb23c377bd1073d26f ',
File structure lines
F1: ' img?uuid=202ccc639afd44130a3946e9837672479c ',
F2: ' img?uuid=20900ceb0053a2f7bd07a22337c4e4c72c ',
Root: ' IMG?UUID=2069CF3FD1E53A2BB365F771EAC65B50A2 ',
Folder
Arr: ' img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b ',
ARRC: ' img?uuid=20b7d6e86f4f288ea097c10b1c0d7f4b6b ',
Obj: ' Img?uuid=20c34d1d5d5a4639061e08165c61a97e63 ',
OBJC: ' Img?uuid=20c34d1d5d5a4639061e08165c61a97e63 ',
File
ARR2: ' img?uuid=20327500502b71ed0278a0cc1bf8f8bb41 ',
Obj2: ' img?uuid=203346cafeedac1fb7628bc886b9b7fb47 '
},
Totree:function () {/* JSON is converted to tree HTML, while formatting the code * *
var Draw=[],this=this,ico=this.ico;
Je.firstup=false;/* completes the first automatic construction * *
var notify=function (prefix/* prefix html*/,lastparent/* parent is tail node (ok icon is blank | structure line) */,NAME/* Node name */,value/* nodes value */,formobj/* Whether the parent is an object (OK child icon)//) {/* Construction child node * *
var rl=prefix== '? ico.r0:lastparent?ico.r1:ico.r2;/* configuration root node icon * *
if (Value&&value.constructor==array) {/* Process array node * *
Draw.push (' <dl><dt> ', This.draw (Prefix,rl,ico.arr,name, '), ' </dt><dd> ');/* Draw Folder/*
for (Var i=0;i<value.length;i++)
Notify (Prefix+this.img (LASTPARENT?ICO.NL:ICO.VL), i==value.length-1,i,value[i]);
Draw.push (' </dd></dl> ');
}else if (value&&typeof value== ' object ') {/* Processing object node/*
Draw.push (' <dl><dt> ', This.draw (Prefix,rl,ico.obj,name, '), ' </dt><dd> ');/* Draw Folder/*
var len=0,i=0;
for (var key in value) len++;/* gets the total number of object Members * *
for (var key in value) Notify (Prefix+this.img (LASTPARENT?ICO.NL:ICO.VL), ++i==len,key,value[key],true);
Draw.push (' </dd></dl> ');
}else{/* Processing leaf node (drawing file) * *
Draw.push (' <dl><dt> ', This.draw (Prefix,lastparent?ico.f1:ico.f2,formobj?ico.obj2:ico.arr2,name, Value), ' </dt></dl> ');
};
};/* is not [] or {} does not draw * *
if (typeof this.data== ' object ') {Notify (', true,this.root,this.data);};
if (This.treeui) This.treeui.innerhtml=draw.join (");/* displayed in tree window * *
This.msg (' successfully construct tree view! ');
},
Draw:function (Prevfix,line,ico,name,value) {/* Child HTML constructor */
var Cmd=false,j=this.ico,imgname=false;
Switch (line) {//Pass toggle icon
Case J.r0:imgname= ' r0 ';
Case J.r1:imgname= ' R1 ';
Case J.r2:imgname= ' R2 ';
}
if (imgname) cmd= ' onclick= ' ' +this.name+ '. Show (this,\ ' +imgname+ ') "';/* Add folding command/*
var type=typeof name== ' string '? ' (Object member) ': ' (array index) ';
Return Prevfix+this.img (Line,cmd)
+ (This.checkbox? ') <input type= "checkbox" onclick= "' +this.name+ '. Select (this) '/> ': '
+this.img (ICO) + ' <a href= ' javascript:void (0) "href=" javascript:void (0) "onclick=" ' +this.name+ '. Click (this); '
+ ' key= ' +name+ ' "val=" ' +value+ ' ">"
+name+type+ (value== '? ': ' = ') +value+ ' </a> '
},
Img:function (src,attr) {/* img HTML construct * *
Return ' ';
},
Click:function (item) {/* subkey click the Reunification callback * *
if (this.hot) this.hot.classname= ';
This.hot=item;
This.hot.classname= ' hot ';//Toggle Selected Item * *
This.onclick (item);
},
Format:function (txt,compress/* is compression mode/) {/* format JSON source (object converted to JSON text) * *
if (/^\s*$/.test (TXT)) return this.msg (' data is empty, cannot be formatted! ');
Try{var data=eval (' (' +txt+ ') ');}
catch (e) {
Je.editui.style.color= ' Red ';
return this.msg (' data source syntax error, format failed!) error message: ' +e.description, ' err ';
};
Je.editui.style.color= ' #000 ';
var draw=[],last=false,this=this,line=compress? ': ' \ n ', nodecount=0,maxdepth=0;
var notify=function (name,value,islast,indent/* indent */,formobj) {
nodecount++;/* Node Count * *
for (Var i=0,tab= '; i<indent;i++) tab+=this.indent;/* indented HTML * *
Tab=compress? ': tab;/* compression mode ignore indent/
maxdepth=++indent;/* indent increment and record * *
if (Value&&value.constructor==array) {/* Process array * *
Draw.push (tab+) (formobj? +name+ ': '): ') + ' [' +line ']/* indent ' [' and then wrap/
for (Var i=0;i<value.length;i++)
Notify (I,value[i],i==value.length-1,indent,false);
Draw.push (tab+ '] ' + (islast?line: (', ' +line));//indent '] ' for line, if not tail element add comma * *
}else if (value&&typeof value== ' object ') {/* Processing object/*
Draw.push (tab+) (formobj? +name+ ': '): ') + ' {' +line ');/* indent ' {' and then change line *
var len=0,i=0;
for (var key in value) len++;
for (var key in value) notify (key,value[key],++i==len,indent,true);
Draw.push (tab+ '} ' + (Islast?line: (', ' +line));//Indent '} ' to wrap, or add comma without tail element * *
}else{
if (typeof value== ' string ') value= ' "' +value+ '";
Draw.push (tab+) (formobj? +name+ ': '): ' +value+ (islast? ': ', ') +line);
};
};
var islast=true,indent=0;
Notify (", data,islast,indent,false);
This.countinfo= ' co-processing node <b> ' +nodecount+ ' </b>, max tree deep <b> ' +maxdepth+ ' </b> ';
Return Draw.join (");
},
Msg:function (Text,type) {/* Edit status or error notification * *
if (!this.msgui) return alert (text);
With (new Date) var now= ([GetHours (), getminutes (), getseconds ()].join (': ')). Replace (/\b\d\b/g, ' 0$& ');
This.msgui.innerhtml= ' <div>[' +now+ '] ' +text.replace (/\n/g, ' <br/> ') + ' </div> ';
This.msgui.classname=type;
},
Show:function (Ico,id) {/* Explicit hidden tree node * *
var Subview=ico.parentnode.parentnode.childnodes[1].style,j=this.ico;
if (subview.display== ' none ') {
Subview.display= ';
Ico.src=j[id];
}else{
Subview.display= ' None ';
Ico.src=j[id+ ' C '];
};
},
Select:function (sender) {
var sub=sender.parentnode.parentnode.getelementsbytagname ("INPUT");
for (Var i=0;i<sub.length;i++) {sub[i].checked=sender.checked}
}
};
Je.add=function () {
This.msg (' feature added ... *_^ ');
}
Je.edititem=function () {
This.msg (' feature added ... *_^ ');
}
Je.begin=function () {/* Set UI Control Associated response * *
var $=function (id) {return document.getElementById (ID)};
/* Associated UI * *
je.editui=$ ("Json_eidit");
je.msgui=$ ("Json_editinfo");
je.treeui=$ ("Tree");
var updateui=$ ("Update");
var auto=$ ("AutoUpdate");
var fontsize=$ ("FontSize");
/* Click the tree subkey * *
Je.onclick=function (item) {
var key= ' key name: <input value= "' +item.getattribute (' key ') + '/> ',
Val= ' key value: ' + (Item.getattribute (' val ') = = '? ' Member List ': ' <input value= ' +item.getattribute (' val ') + '/> '),
add= ' <button onclick= ' +this.name+ '. Add (This) "> Add </button> ',
edit= ' <button onclick= ' +this.name+ ' EditItem (this) ' > Modify </button> ';
Je.msg (key+val+add+edit, ' info ');
}
/* Monitor Code Change Event/*
Je.editui.oninput=je.editui.onpropertychange=function () {
if (je.formating) return;/* format does not refresh the tree * *
if (/^\s*$/.test (this.value)) return je.msg (' Please enter JSON-formatted code! ');;
Cleartimeout (je.update);
Try{je.data=eval (' (' +this.value+ ') ');
}catch (e) {
Je.editui.style.color= ' Red ';
Return je.msg ("Source Code has error:" +e.description+ ", if you are editing, please ignore this message!", ' err ');
};
Je.editui.style.color= ' #000 ';
if (auto.checked| | Je.firstup) {/* if synchronized */
Je.msg (' syntax is correct, tree is being reconstructed, please wait ... ', ' busy ');
Je.update=settimeout (function () {
Je.totree ();
},450);
}else{
Je.msg (' syntax is correct, please click Refresh, or open the View sync switch, or continue editing! ')
}
return true;
};
if (window. ActiveXObject)
Document.execcommand ("Backgroundimagecache", false, true);
/* block tab, automatic format * *
Je.editui.onkeydown=function () {
if (event.keycode==9) {$ (' format_indent '). onclick (); event.returnvalue=false;};
Je.code=this.value;
}
/* Format * *
var format=function (compress) {
var code=je.format (je.editui.value,compress);
Je.formating=true;
if (code) Je.editui.value=code;
JE.editUI.focus ();
settimeout (function () {je.formating=false;},1000);
return code;
}
/* toolbar button/*
$ (' format_indent '). Onclick=function () {if (format ()) je.msg (' Complete indent style conversion, ' +je.countinfo ')}
$ (' format_compress '). Onclick=function () {if (format (true)!=undefined) je.msg (' Complete compact style conversion, ' +je.countinfo ');}
Updateui.onclick=function () {
Je.firstup=true;
JE.editUI.onpropertychange ()? Je.msg (' Successful refresh view! '): je.msg (' Data error, Refresh failed! ', ' err ')
Je.firstup=false;
};
$ (' Clear_txt '). Onclick=function () {je.editui.value=je.treeui.innerhtml= "; JE.editUI.focus ();}
Auto.onclick=function () {je.msg (' Auto sync view feature ' + this.checked? ') Open ': ' Close! ');
/* Save As * *
if (/* @cc_on!@*/true) {$ (' save_as '). style.display= ' None '};
$ (' save_as '). Onclick=function () {
var d=document,w=d.createelement (' IFRAME ');
W.style.display= "None";
D.body.appendchild (w);
settimeout (function () {
var g=w.contentwindow.document;
G.charset = ' utf-8 ';
G.body.innerhtml=je.editui.value;
G.execcommand ("SaveAs", "", "Json.txt");
},1);
}
};
/* Start from here * *
Window.onload=function () {
Je.begin ();
}
--></script>