Approach 1: Using for loop

Approach 2: Using JSON.stringify() method

Take the JSON Object in a variable.
Call a function that first adds the column names to the < table > element. (It is looking for all columns, which is the UNION of the column names).
Traverse the JSON data and match the 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: This example implements the for loop 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;">
        w3wiki
    </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>
        let el_up = document.getElementById("GFG_UP");

        let 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
            let cols = Headers(list, selector);

            // Traversing the JSON data
            for (let i = 0; i < list.length; i++) {
                let row = $('<tr/>');
                for (let colIndex = 0; colIndex < cols.length; colIndex++) {
                    let 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) {
            let columns = [];
            let header = $('<tr/>');

            for (let i = 0; i < list.length; i++) {
                let row = list[i];

                for (let 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:

Output

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 an HTML table.

These are the following approaches for converting the JSON data to an HTML table:

Table of Content

Using for loop
Using JSON.stringify() method

Approach 1: Using for loop

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

Similar Reads