如何利用JSON数据高效生成HTML表格多行？

我已经能通过代码生成HTML表格的第一行，但要添加更多行就得重复大量代码，有没有更高效的实现方式？

我的现有代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
    <table id='overview-table'>
      <tr>
        <th>owner Name</th>
        <th>date</th>
        <th>shares Held</th>
        <th>shares Change</th>
        <th>shares ChangePCT</th>
            <th>market Value</th>
      </tr>
      <tr>
        <td id='ownerName'></td>
        <td id='date'></td>
        <td id='sharesHeld'></td>
        <td id='sharesChange'></td>
        <td id='sharesChangePCT'></td>
            <td id='marketValue'></td>
      </tr>
    </table>
    <script type="text/javascript">
        const requestUrl = 'https://api.npoint.io/b15e98da7b057152618b';
        const requestJSON = async url => {
        
          const response = await (await fetch(url)).json();
          ownerName.innerHTML = response.ownerName[0];
          date.innerHTML = response.date[0];
          sharesHeld.innerHTML = response.sharesHeld[0];
          sharesChange.innerHTML = response.sharesChange[0];
          sharesChangePCT.innerHTML = response.sharesChangePCT[0];
              marketValue.innerHTML = response.marketValue[0];
        }
        requestJSON(requestUrl);
    </script>
</body>
</html>

我的JSON数据结构：

{
    "ownerName":{
        "0":"VANGUARD GROUP INC",
        "1":"BLACKROCK INC.",
        "2":"BERKSHIRE HATHAWAY INC",
        "3":"STATE STREET CORP",
        "4":"FMR LLC",
        "5":"GEODE CAPITAL MANAGEMENT, LLC",
        "6":"PRICE T ROWE ASSOCIATES INC /MD/",
        "7":"MORGAN STANLEY",
        "8":"NORTHERN TRUST CORP",
        "9":"BANK OF AMERICA CORP /DE/"
    },
    "date":{
        "0":"09/30/2022",
        "1":"09/30/2022",
        "2":"09/30/2022",
        "3":"09/30/2022",
        "4":"09/30/2022",
        "5":"09/30/2022",
        "6":"09/30/2022",
        "7":"09/30/2022",
        "8":"09/30/2022",
        "9":"09/30/2022"
    },
    "sharesHeld":{
        "0":"1,272,378,901",
        "1":"1,020,245,185",
        "2":"894,802,319",
        "3":"591,543,874",
        "4":"350,900,116",
        "5":"279,758,518",
        "6":"224,863,541",
        "7":"182,728,771",
        "8":"176,084,862",
        "9":"142,260,591"
    },
    "sharesChange":{
        "0":"-4,940,153",
        "1":"-8,443,132",
        "2":"0",
        "3":"-6,634,650",
        "4":"6,582,142",
        "5":"1,502,326",
        "6":"-13,047,242",
        "7":"278,206",
        "8":"-3,744,060",
        "9":"-6,873,324"
    },
    "sharesChangePCT":{
        "0":"-0.387%",
        "1":"-0.821%",
        "2":"0%",
        "3":"-1.109%",
        "4":"1.912%",
        "5":"0.54%",
        "6":"-5.484%",
        "7":"0.152%",
        "8":"-2.082%",
        "9":"-4.609%"
    },
    "marketValue":{
        "0":"$192,498,204",
        "1":"$154,352,894",
        "2":"$135,374,643",
        "3":"$89,494,673",
        "4":"$53,087,679",
        "5":"$42,324,666",
        "6":"$34,019,605",
        "7":"$27,645,036",
        "8":"$26,639,879",
        "9":"$21,522,605"
    }
}

优化方案：循环遍历数据动态生成行 #

核心思路：通过循环遍历数据的索引，动态创建表格行和单元格，自动填充所有数据，无需手动编写重复的HTML结构。

原生JS实现的完整代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <style>
        /* 可选：添加基础样式提升表格可读性 */
        #overview-table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        #overview-table th, #overview-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        #overview-table th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table id='overview-table'>
      <tr>
        <th>owner Name</th>
        <th>date</th>
        <th>shares Held</th>
        <th>shares Change</th>
        <th>shares ChangePCT</th>
        <th>market Value</th>
      </tr>
      <!-- 表格行将由JS动态生成 -->
    </table>
    <script type="text/javascript">
        const requestUrl = 'https://api.npoint.io/b15e98da7b057152618b';
        const requestJSON = async url => {
          const response = await (await fetch(url)).json();
          // 获取数据总行数（所有字段行数一致，取任意字段的键数量即可）
          const rowCount = Object.keys(response.ownerName).length;
          const table = document.getElementById('overview-table');
          
          // 循环生成每一行
          for(let i = 0; i < rowCount; i++){
              const tr = document.createElement('tr');
              
              // 创建并填充每个单元格
              tr.appendChild(createTd(response.ownerName[i]));
              tr.appendChild(createTd(response.date[i]));
              tr.appendChild(createTd(response.sharesHeld[i]));
              tr.appendChild(createTd(response.sharesChange[i]));
              tr.appendChild(createTd(response.sharesChangePCT[i]));
              tr.appendChild(createTd(response.marketValue[i]));
              
              table.appendChild(tr);
          }
        }
        
        // 封装创建单元格的函数，减少重复代码
        function createTd(text){
            const td = document.createElement('td');
            td.textContent = text;
            return td;
        }
        
        requestJSON(requestUrl);
    </script>
</body>
</html>

jQuery简化版实现 #

如果想利用已引入的jQuery简化DOM操作，可将循环部分替换为：

const requestJSON = async url => {
  const response = await (await fetch(url)).json();
  const rowCount = Object.keys(response.ownerName).length;
  const table = $('#overview-table');
  
  for(let i = 0; i < rowCount; i++){
      const tr = $('<tr>');
      tr.append(`<td>${response.ownerName[i]}</td>`);
      tr.append(`<td>${response.date[i]}</td>`);
      tr.append(`<td>${response.sharesHeld[i]}</td>`);
      tr.append(`<td>${response.sharesChange[i]}</td>`);
      tr.append(`<td>${response.sharesChangePCT[i]}</td>`);
      tr.append(`<td>${response.marketValue[i]}</td>`);
      table.append(tr);
  }
}

优化后的优势 #

• 无需手动编写重复的表格行代码，数据行数变化时无需修改HTML
• 逻辑复用，循环自动处理所有数据，维护成本低
• 代码结构更简洁，可读性更强

内容的提问来源于stack exchange，提问作者kiestuthridge23