This is a translation.JSON editing toolAnd the original version are already products of 2007. browser compatibility is also a very old version, but the tool works normally in new browsers. today, I saw a blog posted by a netizen that mentioned this JSON editor. It feels good to try it. At least it can satisfy my needs. So I will share it with you by the way. the translation is as follows:
I have been searching for a JSON editing tool that includes a tree view for the past few weeks. You can use this tool to get a satisfactory JSON structure review and easily modify the structure.
Yes, I know that expression is a bit like Firebug, but in fact I found the promising attempt of Calm_Pear. But I don't think both of them are enough to meet my initial needs, so I wrote my own tool.
You can try it online or download the source code (zip file, 26 KB ).
How to Use
The source code contains an HTML sample file. As the author, I think the user interface in the example is quite straightforward, but I will still make some explanations. You need to introduce the script and
Create two div IDs in HTML. One is used to place the tree structure, and the other is used to display and edit the form. The page is loaded,
You can use the following method to activate the entire event:
| 1 | JSONeditor. start (treeDivName, formDivName, JSONobject, ShowExampleList) |
JSONeditor is a JavaScript Object. The JSONobject (JSON Structure Code) and ShowExampleList parameters are used to control whether the default display content and sample list are displayed.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<Html> Onload = function (){ JSONeditor. start ('tree', 'jform', {}, true) } </Script> |
Use a Tree View
All objects and arrays, including their subnodes, are displayed as folders. The rules used are as follows:
Click "Expand folder" and click "collapse folder. click a node to load the structure of the node in the editor. the Label, Value, and Data type areas display the JSON path of the selected node. you can modify the corresponding path and Label at will before saving. the Value area displays a JSON expression. the only exception is the string. For ease of reading, the string type is displayed as printed text rather than a JSON expression. the Data type area displays the Data type of the editing node. you can change it, although it is only equivalent to the conversion of the basic type. save changes click Save to Save all your modifications to Lable, Value, and Data type. delete a node click Delete to Delete the selected node. click Rename to Rename the selected node. the program prompts you to enter a new node name. (This is equivalent to modifying in the Label area .) add sub-nodes and adjacent nodes click Add child to Add a sub-node to the selected object or array. click Add sibling to Add a node of the same level after the selected node.
If the Add children first/siblings before option is selected:
A new subnode is added before all subnodes. A new adjacent node is added before the selected node. Cut, copy, and paste
Copy a node:
Select the node you want to Copy in the Tree View. Click the Copy button. Click the target node in the Tree View (the adjacent node at the insert position). Click the Paste button.
Note:
The cut operation is similar to the copy operation, but the source node is removed. if the Paste as child on objects & arrays option is selected, the node is inserted as a subnode. the Add children first/siblings before option still affects the placement of nodes. compatibility
Everything seems to be quite stable, but if you find any bug, please leave a message and I will try to solve it.
Qualified JSON
The JSON file created in the editor is valid and qualified, except that the JavaScript method may not comply with the standard. JSON processing is based on my string converter JSONstring. if you define an internal circular application object, the program will be blocked.
In addition, when it involves every JSON string converter, you should avoid mixing references to DOM nodes in the object you want to modify. That cannot be operated.
Browser
I have tested this tool in IE7, Firefox 2, Opera 9, and Safari 2. It can be used normally, except for the following exceptions:
Method String Conversion is sometimes not available in Safari, a browser bug. when the method contains escape diagonal lines (such as \ n and \ r) and other minor problems, the problem may occur. translator's words
This tool seems to be easy to understand, but after reading the article, I still find some operation details to be aware of. the last section of the article is not translated,
I wrote some functions and improvements (such as adding drag and drop nodes) to the tool, but they have not been modified for four years and there is no hope, so I will not translate them,
Everyone knows. I hope this tool is useful to you. I also hope that someone can perform secondary development on it and make it powerful (such as adding the drag-and-drop function ).
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
