Visual JSON Data Editor With jQuery - JSONedtr

Visual JSON Data Editor With jQuery - JSONedtr
File Size: 8.91 KB
Views Total: 4708
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.