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

30 Sep, 2021
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.
simranarora5sos
JSON
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills