Beautiful JSON Viewer And Editor With jQuery - JSON Editor

A lightweight, simple, beautiful JSON viewer and editor plugin inspired by Abodelot's jQuery JSON Viewer.

The JSON editor helps the developers to render JSON objects in HTML with collapsible/expandable navigation just like a tree view.

Syntax highlighting is supported as well.

How to use it:

1. Create a normal textarea element for the JSON editor.

<textarea id="json-input" autocomplete="off">
  {
    "id": 1001,
    "type": "donut",
    "name": "Cake",
    "description": "http://en.wikipedia.org/wiki/Doughnut",
    "price": 2.55,
    "available": {
      "store": 42,
      "warehouse": 600
    },
    "topping": [
      { "id": 5001, "type": "None" },
      { "id": 5002, "type": "Glazed" },
      { "id": 5005, "type": "Sugar" },
      { "id": 5003, "type": "Chocolate" },
      { "id": 5004, "type": "Maple" }
    ]
  }
</textarea>

2. Create an empty container for the JSON viewer.

<pre id="json-display"></pre>

3. Create a button that will translte the JSON data into HTML.

<button id="translate">Translate</button>

4. Put jQuery library and the jQuery JSON Editor plugin at the bottom of your page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="jquery.json-editor.min.js"></script>

5. The JavaScript to enable the JSON editor.

// get JSON 
function getJson() {
  try {
    return JSON.parse($('#json-input').val());
  } catch (ex) {
    alert('Wrong JSON Format: ' + ex);
  }
}

// initialize
var editor = new JsonEditor('#json-display', getJson());

// enable translate button
$('#translate').on('click', function () {
  editor.load(getJson());
});

---

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