时间戳

首页 > 解决方案 > 如何将 JSON 文件数据显示到 HTML 表中（仅使用 JavaScript，而不是 jQuery）

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

问题描述

我是网络开发的新手，我正在制作一个网站。我想使用 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 文件中的日期。

标签： javascripthtmlcssjson

解决方案

像这样的东西？

// 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>

推荐阅读