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

File Size: 8.22 KB
Views Total: 3482
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 
<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.


6. Determine whether or not to use Bootstrap styles.

  bootstrap: true,
  tableBordered: false // Bootstrap table bordered class

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

  arrayIndex: false

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

  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.