
JSONedtr is an easy and lightweight JSON editor to present JSON data in a tree view where the users are able to add, remove, edit the JSON on the client side.
- Click the ✚ sign to add a row.
- Click the ✖ sign to delete a row.
- Click any key or value to edit it.
1. Import the JSONedtr's JavaScript and CSS files into the document.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="JSONedtr.js"></script> <link rel="stylesheet" href="JSONedtr.css">
2. Create a container element in which you want to render the JSON editor.
<div id="output"></div>
3. Present your JSON data in the JSON editor.
var data = '{ "first_key":"one", "second_key":"two", "third_key":{ "one":"item 3-1", "two":"item 3-2", "three":"item 3-3" }, "fourth_key":[1,2,3,4,5], "fifth_key":{ "level_2":{ "level_3":{ "level_4":"item"} } } }';
new JSONedtr( data, '#output' );
4. Possible options for advanced usage:
runFunctionOnUpdate
contains name of string to be called on change- if
instantChange
is set to true (which it is by default) change function will be called while typing, - if it is set to false function will be called on change event (when field will loose focus)
- for functions which require heavy computing or for large data is recommended to change this to false
function getDataOnChange( data ){ console.log('DATA WAS CHANGED', data.getData()); } new JSONedtr( data, '#output', { runFunctionOnUpdate:'getDataOnChange', instantChange: true });
5. Get the current JSON strings.
instance.getDataString()
This awesome jQuery plugin is developed by LorincJuraj. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 26.11.2018
- Source