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

给定一个包含 JSON 数据的 HTML 文档，任务是将 JSON 数据转换为 HTML 表格。

方法一：

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

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

  HTML

   
   
   
  
      
          How to convert JSON data to a
          html table using JavaScript ?
      
       
      
      
  
   
   
       
       
          GeeksForGeeks 
      
       
      
      
   
       
      
          click here
      
       
      
       
      

                     

---

HTML

 
 
 

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

 
 
     
     
        GeeksForGeeks 
    
     
    
    
 
     
    
        click here
    
     
    
     
    
     
    
        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);
        }