如何使用JavaScript / jQuery将JSON数据转换为html表（）

给定一个包含JSON数据的HTML文档, 任务是将JSON数据转换为HTML表。
方法1：

将JSON对象放入变量中。
调用一个函数, 该函数首先将列名称添加到< table> 元素中(它正在查找所有列, 即列名称的UNION)。
遍历JSON数据并将键与列名匹配。将该键的值放在相应的列中。
如果该键没有值, 则将该列留空。

范例1：本示例实现了上述方法。

< !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; " > lsbin < / 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 >

输出如下：
在单击按钮之前：

如何使用JavaScript / jQuery将JSON数据转换为html表（）

文章图片
单击按钮后：

文章图片
方法二：

将JSON对象存储到变量中。
首先将所有键放在列表中。
创建一个元素< table> 。
为表的标题创建一个< tr> 元素。
访问键列表, 为每个值创建一个< th> 并将其插入为标题创建的< tr> 元素中。
然后, 对于对象中的每个条目, 创建一个单元格并将其插入到特定行。
如果该键没有值, 则将该列留空。

范例2：本示例实现了上述方法。

< !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; " > lsbin < / 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 >

输出如下：
【如何使用JavaScript / jQuery将JSON数据转换为html表（）】在单击按钮之前：