51js json Editor

Carefree JSON editor [Auxiliary Tools]

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <base href = "http://imgqun.qq.com/cgi-bin/"> <br/> <title> ldh_JSON_Editor </title> <br/> <style> <br/> body, html {<br/> margin: 0px; padding: 10px; overflow: hidden; font-size: 12px; <br/> background: # FFCC66 url (img? Uuid = 20b6767c202cdabf6049e98539e8df0de6); color: #333; font-family: tahoma; <br/>}< br/>. title {font-size: 14px; background: url (img? Uuid = cursor) no-repeat; padding-left: 30px ;}< br/># ldh_ui_window {< br/> width: 840px; height: 520px; position: absolute; <br/> background: # fff url (img? Uuid = 209ef12ed3496ca2e94cf1a8041de28cc2) repeat-x 0 32px; <br/> border: 2px solid #4A84C4; border-top: none; <br/> left: 50%; margin: left: -420px; <br/> top: 50%; margin-top:-260px; <br/>}< br/> # ldh_ui_caption {<br/> height: 32px; line-height: 32px; text-indent: 1em; <br/> background: url (img? Uuid = centers) repeat-x; text-align: center; <br/>}< br/> # ldh_ui_body_left {<br/> width: 300px; height: pixel PX; overflow: auto; <br/> position: absolute; left: 10px; top: 55px; <br/> border: 1px solid #4A84C4; <br/>}< br/> # editWindow {width: 500px; position: absolute; left: 325px; top: 55px; border: 1px solid #4A84C4 ;} <br/> # tree_cap {height: 18px; line-height: 18px; text-align: center; background: url (im G? Uuid = 203fe9e79d8933c63af9866344a990e5ee) repeat-x;} <br/>/* toolbar */<br/> # subToolbar {<br/> height: 29px; background: url (img? Uuid = 2089a60bdc587e2b2b895c3cb32608c06f) repeat-x 50% 50%; line-height: 29px; position: relative; width: 100%; text-indent: 10px; <br/>}< br/> # subToolbar a {<br/> color: #000; background: url (img? Uuid = 2023acf6c478a05549e3cdf0demo-6ca7d) no-repeat 0% 50%; padding-left: 20px; text-decoration: none; <br/>}< br/> # subToolbar span {position: absolute; right: 10px; bottom: 4px ;}< br/> # subToolbar a: hover {color: # fff; background-image: url(format.gif); text-decoration: underline ;} <br/> # subToolbar a # save_as {background-image: url (img? Uuid = 2083fbd06db4030248c60ab536af05def2);} <br/> # subToolbar a # format_indent {background-image: url (img? Uuid = 2060be6af87eae7a41f7de458b271cdfdc);} <br/> # subToolbar a # update {background-image: url (img? Uuid = 209d82f0afde195855dca5a2b516fdcc11);} <br/> # subToolbar a # format_compress {background-image: url (img? Uuid = 20e66dfd444ae20969e4bfcc0d33809850);} <br/> # subToolbar a # clear_txt {background-image: url (img? Uuid = signature) ;}< br/>/* end */<br/> # json_eidit {<br/> width: 497px; border: none; margin: 0px; color: #000; <br/> height: 340px; font-size: 14px; <br/>}< br/>. json_editInfo {<br/> line-height: 160%; border: 1px solid #4A84C4; <br/> width: 483px; + width: 500px; height: 65px; color: #003300; <br/> position: absolute; left: 325px; bottom: 12px; <br/>}< br/># json_editInfo {<br/> height: 48px; padding- Left: 60px; padding-top: 10px; <br/> background: url (img? Uuid = 2097679a52658b38bc858e8274a2293451) no-repeat 28px 12px; <br/>}< br/> # json_editInfo B {color: red} <br/> # ldh_ui_window. err {color: red; background-image: url (img? Uuid = 20bded9fd31a0fea0%715c35f1d59c45) ;}< br/># ldh_ui_window. busy {color: #333; background-image: url (img? Uuid = 20c121f445de7a8874541ef58b4147c0e4) ;}< br/># ldh_ui_window. info {color: #006600; background-image: url (img? Uuid = 20775d54151369b7d2a02b6faeb1693a5c);} <br/># json_editInfo input {width: 50px; border: 1px solid #4A84C4; height: 14px ;} <br/> # json_editInfo button {<br/> background: url (img? Uuid = 200913d75fd547b62c50e13d8884bc1d98) no-repeat; <br/> width: 70px; height: 20px; line-height: 20px; text-align: center; <br/> border: none; color: #114060; letter-spacing: 5px; margin-left: 10px; <br/>}< br/>/* for tree */<br/> img, input, select {vertical-align: middle} <br/> # ldh_ui_window # tree {white-space: nowrap; font-size: 12px; line-height: 24px ;} <br/> # tree a {text-decoration: none; color: #333 ;}< br/> # tree a: hover, # Tree. hot {color: #000; background: # 0B92FF ;}< br/> dd, dl, dt {padding: 0; margin: 0; border: none; font-size: 12px ;}< br/> dt img {vertical-align: middle ;}< br/> dt {height: 20px; white-space: nowrap ;} <br/> </style> <br/> </pead> <br/> <body> <br/> <div id = "ldh_ui_window"> <br/> <div id = "ldh_ui_caption"> <strong class = "title"> JSON-Editor </strong> </div> <br/> <div id = "ldh_ui_body_left"> <br /> <div id = "tree_cap"> tree view </div> <br /> <Div id = "tree"> </div> <br/> <div id = "editWindow"> <br/> <div id = "subToolbar"> <br/> <a href = "javascript: void (0) "title =" "id =" format_indent "> indent </a> | <br/> <a href =" javascript: void (0) "title =" "id =" format_compress "> compact </a> | <br/> <a href =" javascript: void (0) "title =" "id =" update "> refresh view </a> | <br/> <a href =" javascript: void (0) "title =" "id =" clear_txt "> clear </a> | <br/> <a href =" javascript: void (0) "Title =" "id =" save_as "> Save As </a> <br/> <span> <br/> <label for =" autoUpdate "> <input type =" checkbox "id =" autoUpdate "checked/> synchronously update Tree View </label> <br/> </span> <br/> </div> <br/> <div id = "edit"> <br/> <textarea id = "json_eidit"> [{"Chinese recipes ": ["Shanghai drunk crab", "Beijing pot roast chicken", "Sichuan-style cold bean", "Halal Sauce Beef"], "Foreign recipes": ["Thai lemon slices ", "chicken burger", "Steamed mandarin fish roll"], "more": {"Chinese": ["South", "North", {"local ": ["snacks", "dinner"]}, "More Choices"] }}, {"Recipe category": ["Shanghai Cuisine", "Sichuan cuisine", "Chaozhou Cuisine ", "Yunnan Cuisine", "Northeast Cuisine", "Anhui Cuisine", "Guangdong Cuisine", "Zhejiang Cuisine "," Hunan cuisine "]}, "Others"] </textarea> <br/> </div> <br/> <fieldset class = "json_editInfo"> <legend> System message </legend> <br/> <div id = "json_editInfo" class = "busy"> loading image, please wait... </div> <br/> </fieldset> <br/> </div> <br/> </body> <br/> <script> <br/>/ * <br/> main Object <br/> */<br/> JE = {<br/> data: {},/* Associate data */<br/> code: false,/* formatted code */<br/> oldCode: [], /* historical Code */<br/> editUI: null,/* associated editing box */<br/> msgUI: null,/* Information Display window */<br/> treeUI: null,/* tree window */<br/> name: 'Je ',/* Instance name */<br/> root: '<B> JSON </B>',/* root node title */<br/> checkbox: 0, /* whether to add a complex box */<br/> hot: null,/* selected node */<br/> indent :'', /* indent '\ t' or four ''' */<br/> firstUp: true,/* auto refresh for the first time */<br/> onclick: Array, /* tree click notification */<br/> countInfo: '',/* Statistics */<br/> formating: false,/* formatting (Tree Reconstruction prohibited) */<br/> ico: {/* tree icon */<br/> // folder structure line <br/> r0: 'img? Uuid = 20166b3094daba4bc6e18817b8301b093a ', <br/> r0c: 'img? Uuid = 208018827ed877e31810e838d33e4ac2b0 ', <br/> r1: 'img? Uuid = 2094c793496278bde84be80bb6cb2117f5 ', <br/> r1c: 'img? Uuid = 205f2329c537dcfd32b5f33bf642f76fa6 ', <br/> r2: 'img? Uuid = 20af62be7c197cae64d3e533f7aaf28c25 ', <br/> r2c: 'img? Uuid = 20a00598da-3e5bc8544cecd8b7f82fcdb ', <br/> // prefix image <br/> nl: 'img? Uuid = 20f508bdc9bb8d98f4529e0fa2475b91bb ', <br/> vl: 'img? Uuid = 20d5de63f4e6927bbb23c377bd1_3d26f ', <br/> // file structure line <br/> f1: 'img? Uuid = 202ccc639afd44130a3946e9837672479c ', <br/> f2: 'img? Uuid = 20900ceb0053a2f7bd07a22337c4e4c72c ', <br/> root: 'img? Uuid = 2069cf3fd1e53a2bb365f771eac65b50a2 ', <br/> // folder <br/> arr: 'img? Uuid = 20b7d6e86f4f288ea097c10b1c0d7f4b6b ', <br/> arrc: 'img? Uuid = 20b7d6e86f4f288ea097c10b1c0d7f4b6b ', <br/> obj: 'img? Uuid = 20c34d1d5d5a4639061e08165c61a97e63 ', <br/> objc: 'img? Uuid = 20c34d1d5d5a4639061e08165c61a97e63 ', <br/> // file <br/> arr2: 'img? Uuid = 20327500502b71ed0278a0cc1bf8f8bb41 ', <br/> obj2: 'img? Uuid = 203104cafeedac1fb7628bc886b9b7fb47 '<br/>}, <br/> toTree: function () {/* JSON conversion to tree HTML, format the code at the same time */<br/> var draw = [], This = this, ico = this. ico; <br/> JE. firstUp = false;/* Complete Automatic Construction for the first time */<br/> var using Y = function (prefix/* prefix HTML */, lastParent/* whether the parent node is the end node (confirm that the icon is blank | structure line) */, name/* node name */, value/* node value */, formObj/* whether the parent is an object (determine the sub-Icon) */) {/* construct the sub-node */<br/> var rl = prefix = ''? Ico. r0: lastParent? Ico. r1: ico. r2;/* configure the root node icon */<br/> if (value & value. constructor = Array) {/* process Array nodes */<br/> draw. push ('<dl> <dt>', This. draw (prefix, rl, ico. arr, name, ''), '</dt> <dd>');/* draw a folder */<br/> for (var I = 0; I <value. length; I ++) <br/> Policy (prefix + This. img (lastParent? Ico. nl: ico. vl), I = value. length-1, I, value [I]); <br/> draw. push ('</dd> </dl>'); <br/>} else if (value & typeof value = 'object ') {/* processing object node */<br/> draw. push ('<dl> <dt>', This. draw (prefix, rl, ico. obj, name, ''), '</dt> <dd>');/* draw a folder */<br/> var len = 0, I = 0; <br/> for (var key in value) len ++;/* obtain the total number of object members */<br/> for (var key in value) Every y (prefix + This. img (lastParent? Ico. nl: ico. vl), ++ I = len, key, value [key], true); <br/> draw. push ('</dd> </dl>'); <br/>} else {/* processing leaf nodes (drawing files) */<br/> draw. push ('<dl> <dt>', This. draw (prefix, lastParent? Ico. f1: ico. f2, formObj? Ico. obj2: ico. arr2, name, value), '</dt> </dl>'); <br/>}; <br/> }; /* not [] or {} do not draw */<br/> if (typeof this. data = 'object') {Policy ('', true, this. root, this. data) ;}; <br/> if (this. treeUI) this. treeUI. innerHTML = draw. join ('');/* display in the tree window */<br/> this. msg ('tree view constructed successfully! '); <Br/>}, <br/> draw: function (prevfix, line, ico, name, value) {/* subitem HTML constructor */<br/> var cmd = false, J = this. ico, imgName = false; <br/> switch (line) {// transfer the switch icon <br/> case J. r0: imgName = 'r0 '; break; <br/> case J. r1: imgName = 'r1'; break; <br/> case J. r2: imgName = 'r2'; <br/>}< br/> if (imgName) cmd = 'onclick = "'+ this. name + '. show (this, \ ''+ imgName + '\')" ';/* Add the folding command */<br/> var type = typeof name = 'string '? '(Object member)': '(array index)'; <br/> return prevfix + this. img (line, cmd) <br/> + (this. checkbox? '<Input type = "checkbox" onclick = "' + this. name + '. select (this) "/> ':'') <br/> + this. img (ico) + '<a href = "javascript: void (0)" onclick = "' + this. name + '. click (this ); "'<br/> + 'key ="' + name + '"val ="' + value + '">' <br/> + name + type + (value = = ''? '': '=') + Value + '</a>' <br/>}, <br/> img: function (src, attr) {/* img HTML construction */<br/> return ' '; <br/>}, <br/> click: function (item) {/* subitem click unified callback */<br/> if (this. hot) this. hot. className = ''; <br/> this. hot = item; <br/> this. hot. className = 'hot ';/* Switch selected items */<br/> this. onclick (item); <br/>}, <br/> format: function (txt, compress/* compression mode */) {/* format the JSON source code (convert the object to JSON text) */<br/> if (/^ \ s * $ /. Test (txt) return this. msg ('the data is empty and cannot be formatted! '); <Br/> try {var data = eval (' + txt + ');} <br/> catch (e) {<br/> JE. editUI. style. color = 'red'; <br/> return this. msg ('data source syntax error, formatting failed! Error message: '+ e. description, 'err'); <br/>}; <br/> JE. editUI. style. color = '# 000'; <br/> var draw = [], last = false, This = this, line = compress? '': '\ N', nodeCount = 0, maxDepth = 0; <br/> var comment y = function (name, value, isLast, indent/* indent */, formObj) {<br/> nodeCount ++;/* node count */<br/> for (var I = 0, tab = ''; I <indent; I ++) tab + = This. indent;/* indent HTML */<br/> tab = compress? '': Tab;/* indent ignored in compression mode */<br/> maxDepth = ++ indent; /* indent progressively and record */<br/> if (value & value. constructor = Array) {/* process Array */<br/> draw. push (tab + (formObj? ('"' + Name + '":'): '') + '[' + line ); /* indent '[' and then wrap */<br/> for (var I = 0; I <value. length; I ++) <br/> sort y (I, value [I], I = value. length-1, indent, false); <br/> draw. push (tab + ']' + (isLast? Line :( ',' + line);/* indent ']' line feed, if it is not a tail element, add a comma */<br/>} else if (value & typeof value = 'object') {/* processing object */<br/> draw. push (tab + (formObj? ('"' + Name + '":'): '') + '{' + line ); /* indent '{' and line feed */<br/> var len = 0, I = 0; <br/> for (var key in value) len ++; <br/> for (var key in value) notify (key, value [key], ++ I = len, indent, true); <br/> draw. push (tab + '}' + (isLast? Line :( ',' + line);/* indent '}' line feed, if it is not the end element, add a comma */<br/>} else {<br/> if (typeof value = 'string ') value = '"' + value + '"'; <br/> draw. push (tab + (formObj? ('"' + Name + '":'): '') + value + (isLast? '': ',') + Line); <br/>}; <br/> var isLast = true, indent = 0; <br/> sort y ('', data, isLast, indent, false); <br/> this. countInfo = 'total processed nodes <B> '+ nodeCount +' </B>. The maximum depth is <B> '+ maxDepth +' </B> '; <br/> return draw. join (''); <br/>}, <br/> msg: function (text, type) {/* edit status or Error Notification */<br/> if (! This. msgUI) return alert (text); <br/> with (new Date) var now = ([getHours (), getMinutes (), getSeconds ()]. join (':')). replace (/\ B \ d \ B/g, '0 $ & '); <br/> this. msgUI. innerHTML = '<div> [' + now + '] & nbsp;' + text. replace (/\ n/g, '<br/>') + '</div>'; <br/> this. msgUI. className = type; <br/>}, <br/> show: function (ico, id) {/* explicit/hidden Tree node */<br/> var subView = ico. parentNode. parentNode. childNodes [1]. style, J = this. ico; <br/> if (subView. d Isplay = 'None') {<br/> subView. display = ''; <br/> ico. src = J [id]; <br/>}else {<br/> subView. display = 'none'; <br/> ico. src = J [id + 'C']; <br/>}; <br/>}, <br/> select: function (sender) {<br/> var sub = sender. parentNode. parentNode. getElementsByTagName ("INPUT"); <br/> for (var I = 0; I <sub. length; I ++) {sub [I]. checked = sender. checked ;}< br/>}< br/>}; <br/> JE. add = function () {<br/> this. msg ('adding function... * _ ^ '); <br/>}< br/> JE. EditItem = function () {<br/> this. msg ('adding function... * _ ^ '); <br/>}< br/> JE. begin = function () {/* set the UI control association response */<br/> var $ = function (id) {return document. getElementById (id) }; <br/>/* Associate UI */<br/> JE. editUI = $ ("json_eidit"); <br/> JE. msgUI = $ ("json_editInfo"); <br/> JE. treeUI = $ ("tree"); <br/> var updateUI = $ ("update"); <br/> var auto = $ ("autoUpdate "); <br/> var fontSize = $ ("fontSize"); <br/>/* click the tree subitem */<br/> JE. onclick = f Unction (item) {<br/> var key = 'key name: <input value = "'+ item. getAttribute ('key') + '"/>', <br/> val = 'key value: '+ (item. getAttribute ('val ') = ''? 'Member list': '<input value = "' + item. getAttribute ('val ') +' "/> '), <br/> add =' <button onclick =" '+ this. name + '. add (this) "> add </button> ', <br/> edit =' <button onclick =" '+ this. name + '. editItem (this) "> modify </button> '; <br/> JE. msg (key + val + add + edit, 'info'); <br/>}< br/>/* listen for code change events */<br/> JE. editUI. oninput = JE. editUI. onpropertychange = function () {<br/> if (JE. formating) return;/* format without refreshing the tree */<br/> if (/^ \ s * $ /. test (this. value) re Turn JE. msg ('enter the code in JSON format! '); <Br/> clearTimeout (JE. update); <br/> try {JE. data = eval ('+ this. value + '); <br/>} catch (e) {<br/> JE. editUI. style. color = 'red'; <br/> return JE. msg ("Source code error:" + e. description + '. if the message is being edited, ignore this message! ', 'Err'); <br/>}; <br/> JE. editUI. style. color = '# 000'; <br/> if (auto. checked | JE. firstUp) {/* If synchronization */<br/> JE. msg ('syntax is correct. Re-constructing the tree. Please wait... ', 'busy'); <br/> JE. update = setTimeout (function () {<br/> JE. toTree (); <br/>}, 450); <br/>}else {<br/> JE. msg ('the syntax is correct. Please click Refresh, or enable view synchronization, or continue editing! ') <Br/>}< br/> return true; <br/>}; <br/> if (window. activeXObject) <br/> document.exe cCommand ("BackgroundImageCache", false, true); <br/>/* intercept the Tab and automatically format it */<br/> JE. editUI. onkeydown = function () {<br/> if (event. keyCode = 9) {$ ('format _ indent '). onclick (); event. returnValue = false ;}; <br/> JE. code = this. value; <br/>}< br/>/* format */<br/> var format = function (compress) {<br/> var code = JE. format (JE. editUI. value, compr Ess); <br/> JE. formating = true; <br/> if (code) JE. editUI. value = code; <br/> JE. editUI. focus (); <br/> setTimeout (function () {JE. formating = false ;}, 1000); <br/> return code; <br/>}< br/>/* toolbar button */<br/> $ ('format _ indent '). onclick = function () {if (format () JE. msg ('converts the indent style,' + JE. countInfo)} <br/> $ ('format _ compress '). onclick = function () {if (format (true )! = Undefined) JE. msg ('complete compact style conversion, '+ JE. countInfo) ;}< br/> updateUI. onclick = function () {<br/> JE. firstUp = true; <br/> JE. editUI. onpropertychange ()? JE. msg ('view refreshed successfully! '): JE. msg ('data error. Refresh failed! ', 'Err') <br/> JE. firstUp = false; <br/>}; <br/> $ ('clear _ txt '). onclick = function () {JE. editUI. value = JE. treeUI. innerHTML = ''; JE. editUI. focus () ;}< br/> auto. onclick = function () {JE. msg ('automatic view synchronization function' + (this. checked? 'Enabled': 'Disabled! ') ;}; <Br/>/* Save As */<br/> if (/* @ cc_on! @ */True) {$ ('Save _ '). style. display = 'none'}; <br/> $ ('Save _ '). onclick = function () {<br/> var d = document, w = d. createElement ('iframe'); <br/> w. style. display = "none"; <br/> d. body. appendChild (w); <br/> setTimeout (function () {<br/> var g1_content1_doc ument; <br/> g. charset = 'utf-8'; <br/> g. body. innerHTML = JE. editUI. value; <br/> g.exe cCommand ("saveas", ''," json.txt "); <br/>}, 1 ); <br/>}< br/>}; <br/>/* start from here */<br/> window. onload = function () {<br/> JE. begin (); <br/>}< br/> </script> <br/> </ptml>
    Tip: you can modify some code before running

• It is used for simple viewing, assisting in modifying complicated JSON data, formatting or compressing JJSON. Of course, you can also freely edit some simple JSON data in real time.
• You can enter or paste some JSON data to verify whether the data is correct.
• Press the Tab key to automatically indent and format the full text.