How to useJSON.stringify() method in Javascript

Store the JSON object into the variable. and first put all keys in a list.
Create an element <table> and 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: This example implements the JSON.stringify() method 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;">
        w3wiki
    </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>
        let el_up = document.getElementById("GFG_UP");

        let 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() {
            let cols = [];

            for (let i = 0; i < list.length; i++) {
                for (let k in list[i]) {
                    if (cols.indexOf(k) === -1) {

                        // Push all keys to the array
                        cols.push(k);
                    }
                }
            }

            // Create a table element
            let table = document.createElement("table");

            // Create table row tr element of a table
            let tr = table.insertRow(-1);

            for (let i = 0; i < cols.length; i++) {

                // Create the table header th element
                let theader = document.createElement("th");
                theader.innerHTML = cols[i];

                // Append columnName to the table row
                tr.appendChild(theader);
            }

            // Adding the data to the table
            for (let i = 0; i < list.length; i++) {

                // Create a new row
                trow = table.insertRow(-1);
                for (let j = 0; j < cols.length; j++) {
                    let cell = trow.insertCell(-1);

                    // Inserting the cell at particular place
                    cell.innerHTML = list[i][cols[j]];
                }
            }

            // Add the newly created table containing json data
            let el = document.getElementById("table");
            el.innerHTML = "";
            el.appendChild(table);
        }    
    </script>
</body>

</html>

Output:

Outout

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.

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

How to useJSON.stringify() method in Javascript

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

Similar Reads