Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 30 Sep, 2021
View Discussion
Improve Article
Save Article

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=
    </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=
    </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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!