Visual JSON Data Editor With jQuery - JSONedtr

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.

How to use 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()

Changelog:

2020-07-22

• Fix an error that caused nested objects to be ignored

---

This awesome jQuery plugin is developed by LorincJuraj. For more Advanced Usages, please check the demo page or visit the official website.