Hướng dẫn json to html table

JSON is a file format that is mostly used to transfer the data/information between servers and web applications. JavaScript and jQuery refer to the implementation of the JavaScript programming language. jQuery is a feature-rich JavaScript library that executes the code in less time as compared to full JavaScript code.

Nội dung chính Show

Section 1: Create a table and insert the JavaScript/jQuery
Section 2: Inserting elements in the List
Section 3: Inserting key values for append data in HTML table
Section 4: Convert the JSON data into an HTML table
Conclusion
About the author

jQuery interacts with the HTML DOM to manipulate the HTML elements. This article provides a procedural guide to converting JSON data to an HTML table using JavaScript/jQuery.

Firstly, of all, a document form is created with <form> tag, in which an HTML table is created with <table> tag. After that, a JavaScript library is imported to employ the built-in features of jQuery. Finally, the JSON data is converted to the formatted table in the HTML document using JavaScript/jQuery.

To practice this functionality, we have provided a detailed example here.

Example

For a better understanding, the example code is divided into four chunks. These chunks are referred to as a particular section. Let’s dig into them:

Section 1: Create a table and insert the JavaScript/jQuery

<html>

<head>

<h2> An example to convert json data to html table using jquery</h2>

</table></div></form></body>

</html>

In the code:

A table is created with <table> tag and various styles are added to it.
Finally, jQuery is imported in this section of code by <script> tag to acquire the built-in functionality of JavaScript and jQuery.

Section 2: Inserting elements in the List

$(function () {
varmyList = [{ "Name": "Awais", "Education": "BSCS", "Location": "Karachi"},
{ "Name": "John", "Education": "DPT", "Location": "Islamabad" },
{ "Name": "Ali", "Education": "B.Sc.", "Location": "Lahore" }]
htmltable(myList);})

The description of this piece of code is provided below:

The function is utilized to fetch the JSON object into the HTML table by passing myList as an argument to the htmltable method.
A list “myList” is added to store the JSON data.
In this list, Name, Education, and Location are added as headers. Moreover, the values of these table headers are also assigned.

Section 3: Inserting key values for append data in HTML table

functionaddcols(list) {
var col = [];
varhTr = $('<tr />');
for (vari = 0; i<list.length; i++) {
var rows = list[i];
for (var k in rows) {
if ($.inArray(k, col) == -1) {
col.push(k);
hTr.append($('<th />').html(k));}}}
$("#htmltable").append(hTr);
return col;}

The description of the above code is provided below:

The addcols() method is used by passing the list of JSON data.
After that, a for loop is employed to store the length of the list in the rows variable.
Another for loop is implemented that executes till the number of elements in the rows is reached.
In this loop, the append property is used to insert the key values into the HTML table.

Section 4: Convert the JSON data into an HTML table

function htmltable(list) {

var cols = addcols(list);

for (var i = 0; i < list.length; i++) {

var row = $('<tr/>');

for (var colIndex = 0; colIndex < cols.length; colIndex++) {

var cv = list[i][cols[colIndex]];

if (cv == null) { cv = ""; }

row.append($('<td/>').html(cv));}

$("#htmltable").append(row);}}

</script></head><body>

The description of this piece of code is given below.

The htmltable() method is used to insert the value of the table by checking the index value.
The first for loop is utilized to move in the horizontal sequence of the table.
The second for loop is used as a nested loop to move the control vertically.
After that, the cv variable is employed to store the column value.
Furthermore, if the value of cv is empty in JSON data, then an empty cell is allocated to it.
Otherwise, it converts data to an HTML table using the append property.

Output

The output returns the execution of all the above sections of code in an HTML table. The Name, Education, and Location are represented in the header. Moreover, different values for these headers are presented in the table.

Conclusion

The JSON data is converted into an HTML table by employing JavaScript/jQuery. jQuery has features of the JavaScript library that can be embedded in any JavaScript file. In this post, you have learned to convert the JSON data to an HTML table using JavaScript/jQuery. The JSON data is structured in such a way that the keys in JSON data are converted into the headers of the table, and the values in the JSON data are converted into entries in a table.

About the author

I hold a master's degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.