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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 newely created table containing json data
            var el = document.getElementById("table");
            el.innerHTML = "";
            el.appendChild(table);
        }    
    </script> 
</body>  
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.