Generate Tables From JSON Arrays & Objects - jQuery JSONtoTable
File Size: | 78.7 KB |
---|---|
Views Total: | 1511 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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.