如何将 JSON 文件数据显示到 HTML 表中（仅使用 JavaScript，而不是 jQuery）答案

【问题标题】：How do I display JSON file data into HTML table (using JavaScript only, not jQuery)如何将 JSON 文件数据显示到 HTML 表中（仅使用 JavaScript，而不是 jQuery）
【发布时间】：2021-02-24 23:33:59
【问题描述】：

我是网络开发的新手，我正在制作一个网站。我想使用 JavaScript 在 HTML 表中显示我的 JSON 数据。据我所知，这段代码。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>stocksite</title>
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <link rel="stylesheet" href="css/stylesheet.css">
</head>
<body onload="loadData()">
   <table> 
     <tr>
       <td id="dt"></td>      
     </tr>
   </table>

   <script>
    
    var data, i;
    function loadData() {
        var xhttp = new XMLHttpRequest();
        xhttp.open('GET', 'data.json', true);
        
        xhttp.send();
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                data = JSON.parse(xhttp.responseText);
                for(i=0; i<data.stocktrade.length; i++){
                    document.getElementById('dt').innerHTML=data.stocktrade[i].date;
                }
                
            }
            
        }
    }
</script>

我有 JSON 文件（名称：data.json）。我想显示 data.json 文件中的日期。

【问题讨论】：

代码乍一看很好，除了你不断覆盖<td id="dt"></td>的内容。如果要创建表格，则需要 a) 创建包含包含文本的单元格的行和 b) 追加而不是覆盖。（此外，每天都会询问如何在表格中显示 JSON 数据；请先查找现有问题）

标签： javascript html css json

【解决方案1】：

这样的？

// const data = require('/data.json'); Just import the file this way
// Say you had a data like following
const data = {
  "stocktrade": [{
      "userId": 1,
      "firstName": "Krish",
      "lastName": "Lee",
      "phoneNumber": "123456",
      "emailAddress": "krish.lee@learningcontainer.com"
    },
    {
      "userId": 2,
      "firstName": "racks",
      "lastName": "jacson",
      "phoneNumber": "123456",
      "emailAddress": "racks.jacson@learningcontainer.com"
    },
    {
      "userId": 3,
      "firstName": "denial",
      "lastName": "roast",
      "phoneNumber": "33333333",
      "emailAddress": "denial.roast@learningcontainer.com"
    },
    {
      "userId": 4,
      "firstName": "devid",
      "lastName": "neo",
      "phoneNumber": "222222222",
      "emailAddress": "devid.neo@learningcontainer.com"
    },
    {
      "userId": 5,
      "firstName": "jone",
      "lastName": "mac",
      "phoneNumber": "111111111",
      "emailAddress": "jone.mac@learningcontainer.com"
    }
  ]
};
var i;

function loadData() {
  const dtable = document.getElementById('dtable');
  for (i = 0; i < data.stocktrade.length; i++) {
    const row = dtable.insertRow(i);
    const cell0 = row.insertCell(0)
    cell0.innerHTML = data.stocktrade[i].firstName;
    const cell1 = row.insertCell(1)
    cell1.innerHTML = data.stocktrade[i].phoneNumber;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>stocksite</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/stylesheet.css">
</head>

<body onload="loadData()">
  <table id="dtable">
    <tr>
      <td id="dt"></td>
    </tr>
  </table>
</body>

</html>

【讨论】：