如何在HTML中加载本地JSON文件并将内容渲染为表格

• require()是Node.js端的模块化语法，浏览器原生不支持，无法直接用来加载本地JSON文件
• 原有遍历逻辑错误：JSON根节点包含tests和metadata两个字段，直接遍历整个JSON对象无法正确拿到测试列表数据

本地测试时不能直接双击HTML文件用file://协议打开，浏览器的跨域安全策略会禁止加载本地JSON文件，需要用本地静态服务（比如VS Code的Live Server插件）以http://或https://协议打开页面，生产环境部署时只要JSON和HTML在同域名下就没有这个问题。

首先确保你页面中已经正确引入jQuery库，再将原有JS代码替换为以下内容：

// 加载指定路径的JSON文件
$.getJSON('api/ssltests.json', function(json) {
  let ssltests = '';
  const testList = json.tests;

  // 存在测试数据时先渲染表头
  if (testList.length > 0) {
    ssltests += '<div class="row">';
    // 取第一条数据的键作为表头字段
    Object.keys(testList[0]).forEach(header => {
      ssltests += `<div class="cell">${header}</div>`;
    })
    ssltests += '</div>';

    // 遍历渲染每一行测试数据
    testList.forEach(item => {
      ssltests += '<div class="row">';
      Object.values(item).forEach(value => {
        // 缺省字段自动显示-，可按需修改
        ssltests += `<div class="cell">${value ?? '-'}</div>`;
      })
      ssltests += '</div>';
    })
  }

  // 将生成的表格内容插入到页面对应容器，需提前在HTML中添加<div id="table-container"></div>
  $('#table-container').html(ssltests);
}).fail(function() {
  console.log('JSON加载失败，请检查文件路径是否正确，或页面是否通过http/https协议访问');
})

如果不想依赖jQuery，可以用原生fetch API实现：

fetch('api/ssltests.json')
  .then(res => {
    if (!res.ok) throw new Error('文件加载失败')
    return res.json()
  })
  .then(json => {
    let ssltests = '';
    const testList = json.tests;

    if (testList.length > 0) {
      ssltests += '<div class="row">';
      Object.keys(testList[0]).forEach(header => {
        ssltests += `<div class="cell">${header}</div>`;
      })
      ssltests += '</div>';

      testList.forEach(item => {
        ssltests += '<div class="row">';
        Object.values(item).forEach(value => {
          ssltests += `<div class="cell">${value ?? '-'}</div>`;
        })
        ssltests += '</div>';
      })
    }

    document.querySelector('#table-container').innerHTML = ssltests;
  })
  .catch(err => {
    console.error('加载出错：', err);
  })

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