如何把JSON DATA转换为html表格

how to convert JSON DATA into html table

提问人：Ganesh Putta 提问时间：10/3/2023 更新时间：10/3/2023 访问量：96

问：

我尝试使用一些示例，但不知何故它不起作用。请指导我。

<html>
<head>
   <style>
      table, th, td {
         border: 1px solid black;
         border-collapse: collapse; 
      }
      td, th {
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Convert JSON data into a html table using Javascript</h2>
   <p>Click the following button to convert JSON results into HTML table</p><br>
   <button id="btn" onclick="convert( )"> Click Here </button> <br>
   <h3> Resulting Table: </h3>
   <div id="container"></div>
   <script>
        function convert() {
            // Sample JSON data
            let jsonData = {
                                "data":[
                                    {
                                        "customer Name": "ganesh",
                                        "ami":"T6767667",
                                        "state":"closed",
                                        "ssoId":"dhhhdhv",
                                        "convId":"I90098890098",
                                        "account number":"2233233"
                                    },
                                    {
                                        "customer Name": "putta",
                                        "ami":"T6767668",
                                        "state":"closed",
                                        "ssoId":"dhhhdhY",
                                        "convId":"I90098890099",
                                        "account number":"2233234"
                                    }
                                ],
                                "metadata":{
                                    "": "",
                                    "outcome":{
                                        "status":200,
                                        "code":0,
                                        "type":"OK",
                                        "message":""
                                    }
                                }
                            };
         
         let container = document.getElementById("container");
         let table = document.createElement("table");
         let cols = Object.keys(jsonData[0]);
         let thead = document.createElement("thead");
         let tr = document.createElement("tr");
         cols.forEach((item) => {
            let th = document.createElement("th");
            th.innerText = item; 
            tr.appendChild(th);
         });
         thead.appendChild(tr);
         table.append(tr)
         jsonData.forEach((item) => {
            let tr = document.createElement("tr");
            let vals = Object.values(item);
            
            vals.forEach((elem) => {
               let td = document.createElement("td");
               td.innerText = elem;
               tr.appendChild(td); 
            });
            table.appendChild(tr);
         });
         container.appendChild(table)
      }
   </script>
</body>
</html>

JavaScript HTML 数组 JSON

评论

1赞 Jaromanda X 10/3/2023
您会在浏览器开发人员工具控制台中看到哪些错误？你有没有尝试过解决这些问题？
0赞 Ganesh Putta 10/3/2023
@JaromandaX 未捕获的 TypeError：无法将 undefined 或 null 转换为对象，这是我在控制台中遇到的错误。
0赞 Afzal K. 10/3/2023
一切都没关系，只需使用“jsonData.data”而不是jsonData
0赞 Afzal K. 10/3/2023
简单来说，jsonData 对象包含一个名为“data”的属性，用于保存表数据，因此我们使用“jsonData.data”访问它。

答：

0赞 Vaibhav Patil 10/3/2023 #1

您提供的代码似乎几乎正确，但有一个小问题。您正在尝试访问 j，但 jsonData 不是一个数组，它是一个具有“data”属性的对象，其中包含您要遍历的数组。您应该访问 jsonData.data 以访问sonData[0]array.pls

我曾经访问过数据对象的数组，并且还为表标题行添加了数据对象。此外，在追加表之前，我已清除容器，以确保在多次单击该按钮时表会更新。jsonData.data<thead>

代码片段

function convert() {
  // Sample JSON data
  let jsonData = {
    "data": [{
        "customer Name": "ganesh",
        "ami": "T6767667",
        "state": "closed",
        "ssoId": "dhhhdhv",
        "convId": "I90098890098",
        "account number": "2233233"
      },
      {
        "customer Name": "putta",
        "ami": "T6767668",
        "state": "closed",
        "ssoId": "dhhhdhY",
        "convId": "I90098890099",
        "account number": "2233234"
      }
    ],
    "metadata": {
      "": "",
      "outcome": {
        "status": 200,
        "code": 0,
        "type": "OK",
        "message": ""
      }
    }
  };

  let container = document.getElementById("container");
  let table = document.createElement("table");
  let cols = Object.keys(jsonData.data[0]);
  let thead = document.createElement("thead");
  let tr = document.createElement("tr");
  cols.forEach((item) => {
    let th = document.createElement("th");
    th.innerText = item;
    tr.appendChild(th);
  });
  thead.appendChild(tr);
  table.appendChild(thead);

  jsonData.data.forEach((item) => {
    let tr = document.createElement("tr");
    let vals = Object.values(item);

    vals.forEach((elem) => {
      let td = document.createElement("td");
      td.innerText = elem;
      tr.appendChild(td);
    });
    table.appendChild(tr);
  });
  container.innerHTML = '';
  container.appendChild(table);
}
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td,
th {
  padding: 10px;
}
<h2>Convert JSON data into an HTML table using JavaScript</h2>
<p>Click the following button to convert JSON results into an HTML table</p><br>
<button id="btn" onclick="convert()"> Click Here </button> <br>
<h3> Resulting Table: </h3>
<div id="container"></div>

上一个：排列多维数组 webapp 下拉列表相关

下一个：JavaScript 中的动态变量名称 [duplicate]