Generate Tables From JSON Arrays & Objects - jQuery JSONtoTable

A lightweight yet powerful jQuery JSON to Table plugin that quickly generates HTML tables from JSON arrays or JSON objects you provide.

Tables are the best way to display data in a tabular manner. From a table, people can understand the information and make quick decisions based on the rows and columns. If you have semi-structured data from your JSON from other sources, you can use this plugin to convert them into HTML tables.

See Also:

• 10 Best Table Export Plugins In JavaScript
• 10 Best Online JSON Data Converters In JavaScript

How to use it:

1. To get started, include the jquery.jsontotable.min.js after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.jsontotable.min.js"></script>

2. Create a container to hold the table generated from the JSON data you provide.

<div id="example"></div>

3. Convert a JSON array into an HTML table.

// define your data
var myData = [
    [1, 2, 3],
    ["one", "two", "three"]
];

// generate the table
$.jsontotable(myData, { 
  id: "#example", 
});

4. Convert JSON objects into an HTML table.

// define your data
var myData = [
    {"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
    {"Title1": "안녕하세요", "Title2": "좋아요", "Title3": "감사합니다"},
    {"Title1": "こんにちは", "Title2": "ファイン", "Title3": "ありがとう"},
    {"Title1": "你好", "Title2": "精", "Title3": "谢谢"},
    {"Title1": "Bonjour", "Title2": "Beaux", "Title3": "Merci"},
    {"Title1": "Ciao", "Title2": "Bene", "Title3": "Grazie"}
];

// generate the table
$.jsontotable(myData, { 
  id: "#example", 
});

5. Convert a JSON string into an HTML table.

// define your data
var str = "[\
    {\"Title1\": \"Hello\", \"Title2\": \"Fine\", \"Title3\": \"Thank you\"}, \
    {\"Title1\": \"안녕하세요\", \"Title2\": \"좋아요\", \"Title3\": \"감사합니다\"}, \
    {\"Title1\": \"こんにちは\", \"Title2\": \"ファイン\", \"Title3\": \"ありがとう\"}, \
    {\"Title1\": \"你好\", \"Title2\": \"精\", \"Title3\": \"谢谢\"}, \
    {\"Title1\": \"Bonjour\", \"Title2\": \"Beaux\", \"Title3\": \"Merci\"}, \
    {\"Title1\": \"Ciao\", \"Title2\": \"Bene\", \"Title3\": \"Grazie\"} \
]";

// generate the table
$.jsontotable(str, { 
  id: "#example", 
});

6. Determine whether to show the table header. Default: true.

$.jsontotable(str, { 
  id: "#example", 
  header: false,
});

7. Add custom CSS classes to the HTML table. Default: null.

$.jsontotable(str, { 
  id: "#example", 
  className: "table table-bordered table-striped",
});

---

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