如何使用JavaScript遍历含父标题链接的JSON数据并渲染到HTML

基础实现 #

你可以直接通过原生JavaScript动态创建DOM的方式完成渲染，无需引入第三方库，完整可运行代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>链接列表渲染</title>
</head>
<body>
  <!-- 渲染结果的容器 -->
  <div id="linkContainer"></div>

  <script>
    // 你的JSON数据
    var data = {
      "Parent title": [{
        "Link1": "link1.html",
        "Link2": "link2.html",
        "Link3": "link3.html",
      }],
      "Parent title2": [{
        "Link1": "link1.html",
        "Link2": "link2.html",
        "Link3": "link3.html",
      }],
      "Parent 3": [{
        "Link1": "link1.html",
        "Link2": "link2.html",
        "Link3": "link3.html",
      }]
    }

    // 获取容器元素
    const container = document.getElementById('linkContainer')

    // 遍历所有父级标题
    for (const parentTitle in data) {
      if (Object.hasOwn(data, parentTitle)) {
        // 1. 创建外层div
        const wrapperDiv = document.createElement('div')
        
        // 2. 创建父标题p标签
        const titleP = document.createElement('p')
        titleP.textContent = parentTitle
        wrapperDiv.appendChild(titleP)

        // 3. 创建ul列表
        const ul = document.createElement('ul')
        // 获取当前父标题对应的链接对象（数组第一个元素）
        const linkMap = data[parentTitle][0]
        // 遍历所有链接
        for (const linkText in linkMap) {
          if (Object.hasOwn(linkMap, linkText)) {
            // 创建li和a标签
            const li = document.createElement('li')
            const a = document.createElement('a')
            a.setAttribute('href', linkMap[linkText])
            a.textContent = linkText
            li.appendChild(a)
            ul.appendChild(li)
          }
        }

        wrapperDiv.appendChild(ul)
        container.appendChild(wrapperDiv)
      }
    }
  </script>
</body>
</html>

实现逻辑说明 #

• 先定义专门承载渲染结果的DOM容器，避免直接修改body元素造成页面结构混乱
• 用for...in遍历JSON数据的所有父级标题属性，通过Object.hasOwn过滤原型链异常属性，保证遍历安全
• 每匹配到一个父级标题，就按需求结构依次创建外层div、父标题p标签、链接列表ul
• 遍历当前父标题对应的链接键值对，逐个创建li和a标签，分别赋值跳转链接和显示文本
• 最后将生成的完整结构追加到页面容器中

大数据量优化方案 #

如果你的JSON数据量很大，可以用DocumentFragment实现批量DOM插入，减少页面重绘次数，提升渲染性能，核心优化代码如下：

const container = document.getElementById('linkContainer')
// 创建文档片段，批量插入减少DOM重绘
const fragment = document.createDocumentFragment()

for (const parentTitle in data) {
  if (Object.hasOwn(data, parentTitle)) {
    const wrapperDiv = document.createElement('div')
    const titleP = document.createElement('p')
    titleP.textContent = parentTitle
    wrapperDiv.appendChild(titleP)

    const ul = document.createElement('ul')
    const linkMap = data[parentTitle][0]
    for (const linkText in linkMap) {
      if (Object.hasOwn(linkMap, linkText)) {
        const li = document.createElement('li')
        const a = document.createElement('a')
        a.href = linkMap[linkText]
        a.textContent = linkText
        li.appendChild(a)
        ul.appendChild(li)
      }
    }

    wrapperDiv.appendChild(ul)
    fragment.appendChild(wrapperDiv)
  }
}
// 一次性插入所有生成的结构
container.appendChild(fragment)

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