How to convert JSON data to a html table using JavaScript/jQuery ?

Given an HTML document containing JSON data and the task is to convert JSON data into a HTML table.

Approach 1:

Take the JSON Object in a variable.
Call a function which first adds the column names to the < table > element.(It is looking for the all columns, which is UNION of the column names).
Traverse the JSON data and match key with the column name. Put the value of that key in the respective column.
Leave the column empty if there is no value of that key.

Example 1: This example implements the above approach.

HTML

<!DOCTYPE HTML> 
<html> 
 
<head>
    <title>
        How to convert JSON data to a
        html table using JavaScript ?
    </title>
     
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>
 
<body style = "text-align:center;" id = "body"> 
     
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1>
     
    <p id = "GFG_UP" style =
        "font-size: 15px; font-weight: bold;">
    </p>
 
     
    <button onclick = "constructTable('#table')">
        click here
    </button>
     
    <br><br>
     
    <table align = "center"
            id="table" border="1">
    </table>
     
    <script>
        var el_up = document.getElementById("GFG_UP");
         
        var list = [
            { "col_1": "val_11", "col_3": "val_13" },
            { "col_2": "val_22", "col_3": "val_23" },
            { "col_1": "val_31", "col_3": "val_33" }
        ];
         
        el_up.innerHTML = "Click on the button to create "
                +   "the table from the JSON data.<br><br>"
                + JSON.stringify(list[0]) + "<br>"
                + JSON.stringify(list[1]) + "<br>"
                + JSON.stringify(list[2]);  
             
        function constructTable(selector) {
             
            // Getting the all column names
            var cols = Headers(list, selector); 
  
            // Traversing the JSON data
            for (var i = 0; i < list.length; i++) {
                var row = $('<tr/>');  
                for (var colIndex = 0; colIndex < cols.length; colIndex++)
                {
                    var val = list[i][cols[colIndex]];
                     
                    // If there is any key, which is matching
                    // with the column name
                    if (val == null) val = ""; 
                        row.append($('<td/>').html(val));
                }
                 
                // Adding each row to the table
                $(selector).append(row);
            }
        }
         
        function Headers(list, selector) {
            var columns = [];
            var header = $('<tr/>');
             
            for (var i = 0; i < list.length; i++) {
                var row = list[i];
                 
                for (var k in row) {
                    if ($.inArray(k, columns) == -1) {
                        columns.push(k);
                         
                        // Creating the header
                        header.append($('<th/>').html(k));
                    }
                }
            }
             
            // Appending the header to the table
            $(selector).append(header);
                return columns;
        }      
    </script>
</body> 
 
</html>

Output:

Before clicking on the button:

After clicking on the button:

Approach 2:

Store the JSON object into the variable.
First put all keys in a list.
Create an element <table>.
Create a <tr> element for the header of the table.
Visit the keys list and create a <th> for each value and insert it into the <tr> element created for the header.
Then, for every entry in the object, create a cell and insert it to the particular row.
Leave the column empty if there is no value of that key.

Example 2: This example implements the above approach.

HTML

<!DOCTYPE HTML> 
<html> 
 
<head>
    <title>
        How to convert JSON data to a html
        table using JavaScript/jQuery ?
    </title>
     
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>
 
<body style = "text-align:center;"> 
     
    <h1 style = "color:green;"> 
        GeeksForGeeks 
    </h1>
     
    <p id = "GFG_UP" style =
            "font-size: 15px; font-weight: bold;">
    </p>
 
     
    <button onclick = "GFG_FUN()">
        click here
    </button>
     
    <br><br>
     
    <table id="table" align = "center" border="1px"></table>
     
    <script>
        var el_up = document.getElementById("GFG_UP");
         
        var list = [
            {"col_1":"val_11", "col_2":"val_12", "col_3":"val_13"},
            {"col_1":"val_21", "col_2":"val_22", "col_3":"val_23"},
            {"col_1":"val_31", "col_2":"val_32", "col_3":"val_33"}
        ];
         
        el_up.innerHTML = "Click on the button to create the "
                + "table from the JSON data.<br><br>"
                + JSON.stringify(list[0]) + "<br>"
                + JSON.stringify(list[1]) + "<br>"
                + JSON.stringify(list[2]);  
         
        function GFG_FUN() {
            var cols = [];
             
            for (var i = 0; i < list.length; i++) {
                for (var k in list[i]) {
                    if (cols.indexOf(k) === -1) {
                         
                        // Push all keys to the array
                        cols.push(k);
                    }
                }
            }
             
            // Create a table element
            var table = document.createElement("table");
             
            // Create table row tr element of a table
            var tr = table.insertRow(-1);
             
            for (var i = 0; i < cols.length; i++) {
                 
                // Create the table header th element
                var theader = document.createElement("th");
                theader.innerHTML = cols[i];
                 
                // Append columnName to the table row
                tr.appendChild(theader);
            }
             
            // Adding the data to the table
            for (var i = 0; i < list.length; i++) {
                 
                // Create a new row
                trow = table.insertRow(-1);
                for (var j = 0; j < cols.length; j++) {
                    var cell = trow.insertCell(-1);
                     
                    // Inserting the cell at particular place
                    cell.innerHTML = list[i][cols[j]];
                }
            }
             
            // Add the newly created table containing json data
            var el = document.getElementById("table");
            el.innerHTML = "";
            el.appendChild(table);
        }   
    </script>
</body> 
 
</html>

Output:

Before clicking on the button:

After clicking on the button:

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

Last Updated : 30 Sep, 2021

How to convert JSON data to a html table using JavaScript/jQuery ?

HTML

HTML

Please Login to comment...