In this tutorial, I will explain how you can display JSON data in an HTML table using jquery dynamically.
Because I don’t want to define the header and the columns, the plugin should read the keys in the JSON data and generate columns and header of the table.
Basically, my task is to convert JSON data to an HTML table.
But later I decided to write my own code instead of using the third-party plugin. so here I’m going to share my code with other developers also.
In this article, We will cover the below points in the
- Populate html table with json data
- How to create dynamic table with JSON data?
- Display json data in html table using jquery dynamically
- Converting json data to a html table
I have JSON array data which has contains the employee with ‘EmployeeID’, ‘EmployeeName’, ‘Address’, ‘City’, ‘Country’ fields.
Convert json array data to a html table
I’m looping through the employee array in order to extract the headers of the table.
Here we are creating an HTML table element and adding class to it.
we generate the header of the HTML table using
Adding employee JSON data in the table
Append HTML table to the container div
JSON Basic concept
JSON is a ‘lightweight data format’ which can be easily understood, it is very easy for any machine to parse and generate it. Before JSON, XML (Extensible Markup Language) was used as the primary data format inside web services. But after the advent of JSON, the use of XML has reduced a lot. Because it is a very lightweight format in comparison to XML.
A JSON file can be recognized with a ” .json ” extension. The JSON data is kept inside a .json file. The JSON file consists of plain text which is easy to read and understand. The .json file can be opened and examined and can be sent over the Internet without any problems.
JSON is a simple text-based format, whereas it is a Markup Language.
JSON is very popular because it is a lightweight format, whereas XML contains tags, properties, etc. Because of this, it is heavier.
It does not support namespace and comment, supports comment and namespace in XML.
Data in JSON is in the pair of keys and values and is like a simple object. Whereas the data in XML is in the format of tags which is a bit difficult as compared to JSON so nowadays JSON is being used inside most of the software applications.
- JSON is a Human Readable Format that can be easily understood and read by anyone.
- JSON is also called language independent because it does not work for any language.
- It supports all popular programming languages like JAVA, PYTHON, C, C++, C#, PHP, etc.
- It is very easy to access and organize.
- Its most important advantages are that it is a very light format.
- Due to JSON, server-side parsing is very fast so that the response can be delivered to the user in the shortest possible time.
- It supports all browsers and operating systems.
- Any type of media files such as Video, Audio, Images, and any type of binary information cannot be transferred through JSON.
- There is no error handling inside JSON.
- One of the most dangerous disadvantages of JSON is that when you use any untrusted services and browsers, the service that gives a wrapped JSON response increases the chances of your application being hacked.