{"id":1231,"date":"2023-01-21T14:00:06","date_gmt":"2023-01-21T10:30:06","guid":{"rendered":"https:\/\/m-shaeri.ir\/blog\/?p=1231"},"modified":"2023-01-23T13:51:48","modified_gmt":"2023-01-23T10:21:48","slug":"flexitable-a-jquery-plugin-converting-dynamic-json-data-to-html-table","status":"publish","type":"post","link":"https:\/\/mshaeri.com\/blog\/flexitable-a-jquery-plugin-converting-dynamic-json-data-to-html-table\/","title":{"rendered":"FlexiTable- A jQuery Plugin Converting Dynamic JSON With Nested Objects To HTML Table"},"content":{"rendered":"\n

JSON or JavaScript Object Notation is a simple human readable data format that is mostly used to transfer\/store data in web applications. It might happened in a project that you deal with JSON data received from back-end API, where you need to convert the data into an easy to read HTML table to display data for users. The problem comes when the JSON contains dynamic fields and nested objects that makes it difficult to parse the data and construct a table structure showing the data. For that purpose I developed a tiny plugin that generate HTML table of JSON data loaded from server. I put the <\/p>\n\n\n\n

In this article, I’ll be introducing Flexitable<\/a>, a jQuery plugin that I developed recently to convert complex JSON data into an HTML table easily. Let’s get started.<\/p>\n\n\n\n

Assume we have following JSON array :<\/p>\n\n\n\n

[\n{\n    \"Id\" : 1,\n    \"Name\" : \"Alex Jeferson\",\n    \"Mathematics\" : {\n        \"S1\" : 14,\n        \"S2\" : 18\n    },\n    \"Chemistry\" : {\n        \"S1\" : 19,\n        \"S2\" : 17\n    },\n    \"Average\" : 17\n},\n{\n    \"Id\" : 2,\n    \"Name\" : \"Joe Mesh\",\n    \"Age\" : 29,\n    \"Mathematics\" : {\n        \"S1\" : 10,\n        \"S2\" : 12\n    },\n    \"Chemistry\" : {\n        \"S1\" : 14,\n        \"S2\" : 18\n    },\n    \"Average\" : 15\n}\n]<\/code><\/pre>\n\n\n\n
As you can see , records in the above JSON data contain fields Mathematics <\/strong>and Chemistry<\/strong> that their value are an Object instead of primitives. To show these kind of fields it is better to have parent and sub-header structure in order to make data easy to read and understandable. So, we need to display it in our front-end like below table :<\/p>\n\n\n\n
\n\n\n
ID<\/td>Name<\/td>Mathematics<\/td>Chemistry<\/td>Average<\/td><\/tr>\n
 Semester 1<\/td>Semester 2<\/td>Semester 1<\/td>Semester 2<\/td><\/tr>\n
5005<\/td>Alex Jeferson<\/td>14<\/td>18<\/td>19<\/td>17<\/td>17<\/td><\/tr>\n
5016<\/td>Joe Mesh<\/td>10<\/td>12<\/td>14<\/td>18<\/td>15<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
With Flexitable <\/a>it’s a peace of a cake to construct such tables. Let’s go to the point, the Flexitable<\/strong>.<\/p>\n\n\n\n
The  Flexitable <\/strong>can be called on any container element such as Div to inject the desired table into it. It also can be called as stand alone function returning the Table DOM element : <\/p>\n\n\n\n
\/\/ Call Flexitable on a container to embed the table in the \n$(\"#targetDiv\").flexiTable({...});\n\n\/\/ Calling the Flexitable as a stand alone function\nvar dataTable;\n$.flexiTable({...}).then((generatedTable) => { dataTable = generatedTable;});<\/code><\/pre>\n\n\n\n
Flexitable accepts Json as Javascript array and also it is able to fetch the JSON from a given URL :<\/p>\n\n\n\n
\/\/ calling Flexitable with a java script json array\nvar jsonData = [{\"id\" : 1, \"Name\" : \"Sam\"}, {\"id\" : 2, \"Name\" : \"Joe\"}];\n$(\"#targetDiv\").flexiTable({\n               data <\/strong>: jsonData\n});\n\n\n\/\/ calling Flexitable with a url\nvar dataURL= \"https:\/\/pathTOUrl.com\/json\";\n$(\"#targetDiv\").flexiTable({\n               data <\/strong>: dataURL\n});<\/code><\/pre>\n\n\n\n
You may need the table structure to place records cell vertically like below picture :<\/p>\n\n\n\n
\"\"<\/a>
Flexitable showing the json data with nested objects vertically<\/figcaption><\/figure>\n\n\n\n
Flexitable has solution for this need. put the verticalHeaders parameter in options :<\/p>\n\n\n\n
\nvar jsonData = [{\"id\" : 1, \"Name\" : \"Sam\"}, {\"id\" : 2, \"Name\" : \"Joe\"}];\n$(\"#targetDiv\").flexiTable({\n               data : jsonData,\n               verticalHeaders <\/strong>: true\n});<\/code><\/pre>\n\n\n\n
In case that you use the plugin to retrieve data from a URL, you can set a refresh period option in millisecond to retrieve the data periodically :<\/p>\n\n\n\n
\nvar jsonData = [{\"id\" : 1, \"Name\" : \"Sam\"}, {\"id\" : 2, \"Name\" : \"Joe\"}];\n$(\"#targetDiv\").flexiTable({\n               data : jsonData,\n               verticalHeaders : true,\n               refreshPriod <\/strong>: 30000\n});<\/code><\/pre>\n\n\n\n
The titles name can be customized by mapping their path to a name :<\/p>\n\n\n\n
\nvar jsonData = [{\"id\" : 1, \"Name\" : \"Joe\", grade : { \"Math\" : 11, \"Sport\" : 15 }},\n                {\"id\" : 2, \"Name\" : \"Sam\", grade : { \"Math\" : 12, \"Sport\" : 18 }}];\n$(\"#targetDiv\").flexiTable({\n               data : jsonData,\n               verticalHeaders : true,\n               refreshPriod : 30000,\n               columnsTitle <\/strong>: {'id' : 'Student ID', 'grade.Math' : 'Mathematics'}\n});<\/code><\/pre>\n\n\n\n
For fields containing an array, you can separate array items in the cell using arraySeparator :<\/p>\n\n\n\n
\n\nvar jsonData = [{\"id\" : 1, \"Name\" : \"Joe\", absence: [\"12th may\", \"5th jun\"]},\n                {\"id\" : 2, \"Name\" : \"Sam\", absence: [\"13th Sep\", \"1st May\"]];\n$(\"#targetDiv\").flexiTable({\n               data : jsonData,\n               verticalHeaders : true,\n               refreshPriod : 30000,\n               arraySeparator<\/strong> : \", \"\n});\n<\/code><\/pre>\n\n\n\n
RTL or LTR direction of the table can be defined using rtl parameter :<\/p>\n\n\n\n
\nvar jsonData = [{\"id\" : 1, \"Name\" : \"Joe\", absence: [\"12th may\", \"5th jun\"]},\n                {\"id\" : 2, \"Name\" : \"Sam\", absence: [\"13th Sep\", \"1st May\"]];\n$(\"#targetDiv\").flexiTable({\n               data : jsonData,\n               verticalHeaders : true,\n               refreshPriod : 30000,\n               rtl<\/strong>: true\n});\n<\/code><\/pre>\n\n\n\n
Finally the Id and CSS class of the table :<\/p>\n\n\n\n
\nvar jsonData = [{\"id\" : 1, \"Name\" : \"Joe\", absence: [\"12th may\", \"5th jun\"]},\n                {\"id\" : 2, \"Name\" : \"Sam\", absence: [\"13th Sep\", \"1st May\"]];\n$(\"#targetDiv\").flexiTable({\n               data : jsonData,\n               verticalHeaders : true,\n               refreshPriod : 30000,\n               tableID<\/strong>: \"reportTable\",\n               tableCssClass <\/strong>: \"report colored\"\n});\n<\/code><\/pre>\n\n\n\n
If you have JSON array of primitive type without key-value pair, the table sets header title for them by indexing staring from zero (0). Then you can choose a custom title for them using their index and columnsTitle <\/strong>paramter :<\/p>\n\n\n\n
\nvar jsonData = [[\"Alex\",12,13],[\"David\",15,14],[\"Jone\",13,11]];\n$(\"#targetDiv\").flexiTable({\n               data : jsonData,\n               verticalHeaders : true,\n               refreshPriod : 30000,\n               columnsTitle <\/strong>: {'0' : 'Student Name', '1' : 'Mathematics', '2' : 'Sport'}\n});<\/code><\/pre>\n\n\n\n
At last but not the least, import the plugin in npm :<\/p>\n\n\n\n
npm i jqueryflexitable<\/code><\/code><\/pre>\n\n\n\n
And in HTML page :<\/p>\n\n\n\n
<script\u00a0src=\"jquery.flexitable.js\"\u00a0><\/script><\/code><\/pre>\n\n\n\n
That\u2019s it. Hope you find this jquery plugin useful. Thanks for reading. \u263a<\/p>\n","protected":false},"excerpt":{"rendered":"
JSON or JavaScript Object Notation is a simple human readable data format that is mostly used to transfer\/store data in web applications. It might happened in … <\/p>\n","protected":false},"author":1,"featured_media":1246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[181,1,180,74,75,94,35,110],"tags":[184,46,76,77,67,182,68],"_links":{"self":[{"href":"https:\/\/mshaeri.com\/blog\/wp-json\/wp\/v2\/posts\/1231"}],"collection":[{"href":"https:\/\/mshaeri.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mshaeri.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mshaeri.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mshaeri.com\/blog\/wp-json\/wp\/v2\/comments?post=1231"}],"version-history":[{"count":0,"href":"https:\/\/mshaeri.com\/blog\/wp-json\/wp\/v2\/posts\/1231\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mshaeri.com\/blog\/wp-json\/wp\/v2\/media\/1246"}],"wp:attachment":[{"href":"https:\/\/mshaeri.com\/blog\/wp-json\/wp\/v2\/media?parent=1231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mshaeri.com\/blog\/wp-json\/wp\/v2\/categories?post=1231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mshaeri.com\/blog\/wp-json\/wp\/v2\/tags?post=1231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}