JSON Objects/Arrays To HTML Table - jQuery jsonViewer.js

The jQuery jsonViewer.js plugin converts JavaScript (JSON) objects/arrays into a formated HTML table for better readability.

By default, the plugin uses Bootstrap framework to style the generated HTML table and JavaScript objects/arrays/values.

How to use it:

1. Load the Bootstrap's stylesheet in the header (OPTIONAL).

<link rel="stylesheet" href="bootstrap.min.css">

2. Create a container to place the HTML table.

<div id="jsonViewer"></div>

3. Load jQuery library and the jsonViewer.js script at the bottom of the 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="jsonViewer.js"></script>

4. Prepare your data.

var myData = {
    "glossary": {
      "title": "example glossary",
    "GlossDiv": {
      "title": "S",
      "GlossList": {
        "GlossEntry": {
        "ID": "SGML",
        "SortAs": "SGML",
        "GlossTerm": "Standard Generalized Markup Language",
        "Acronym": "SGML",
        "Abbrev": "ISO 8879:1986",
        "GlossDef": {
          "para": "A meta-markup language, used to create markup languages such as DocBook.",
          "GlossSeeAlso": ["GML", "XML"]
         },
        "GlossSee": "markup"
        }
      }
  }
};

5. Convert the JSON objects into an HTML table.

$('#jsonViewer').jsonTable(myData);

6. Determine whether or not to use Bootstrap styles.

$('#jsonViewer').jsonTable(myData,{
  bootstrap: true,
  tableBordered: false // Bootstrap table bordered class
});

7. Determine whether or not to view the indices of array elements.

$('#jsonViewer').jsonTable(myData,{
  arrayIndex: false
});

8. Default CSS classes which can be used to style the table/objects/arrays/vaules using your own CSS.

$('#jsonViewer').jsonTable(myData,{
  objectClass: 'warning',
  arrayClass: 'info',
  valueClass: 'success',
  nullClass: 'danger'
});

---

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