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.
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.
Please Login to comment...