动态创建的Div无法在表格列中显示嵌套JSON值问题排查

常见错误点及修复方案 #

1. 动态创建的Div未挂载到TD元素

你可能只完成了Div的内容设置，但忘记将Div添加到目标<td>中。仅设置theDiv.innerHTML或textContent不会让元素出现在DOM里，必须通过appendChild或append将Div挂载到TD节点上。

2. 嵌套JSON遍历函数逻辑缺陷

如果你的nestedJsonIterator没有正确处理对象的键值对、或未返回可渲染的内容，就会出现空白。比如函数未判断值的类型、或遍历后没有拼接有效输出字符串。

完整代码示例 #

假设你的JSON结构如下：

const data = {
  softwares: [
    {
      name: "软件A",
      version: "1.0",
      _links: {
        homepage: "https://example.com/a",
        download: "https://example.com/a/download"
      }
    },
    {
      name: "软件B",
      version: "2.0",
      _links: {
        homepage: "https://example.com/b"
      }
    }
  ]
};

正确生成表格的代码

function generateTable(data) {
  const table = document.createElement('table');
  const thead = document.createElement('thead');
  const headerRow = document.createElement('tr');

  // 生成表头
  const headers = Object.keys(data.softwares[0]);
  headers.forEach(header => {
    const th = document.createElement('th');
    th.textContent = header;
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);
  table.appendChild(thead);

  // 生成表体
  const tbody = document.createElement('tbody');
  data.softwares.forEach(item => {
    const row = document.createElement('tr');
    Object.entries(item).forEach(([key, value]) => {
      const td = document.createElement('td');

      // 处理_links嵌套对象
      if (key === '_links' && typeof value === 'object' && value !== null) {
        const linkDiv = document.createElement('div');
        // 遍历_links的键值对，生成可展示内容
        Object.entries(value).forEach(([linkKey, linkUrl]) => {
          const linkItem = document.createElement('p');
          // 安全生成链接（若内容不可信，可改用textContent避免XSS）
          linkItem.innerHTML = `${linkKey}: <a href="${linkUrl}" target="_blank">${linkUrl}</a>`;
          linkDiv.appendChild(linkItem);
        });
        // 关键步骤：将Div添加到TD中
        td.appendChild(linkDiv);
      } else {
        // 普通属性直接显示文本
        td.textContent = value;
      }

      row.appendChild(td);
    });
    tbody.appendChild(row);
  });

  table.appendChild(tbody);
  return table;
}

// 将表格添加到页面
document.body.appendChild(generateTable(data));

修复后的嵌套JSON遍历函数

function nestedJsonIterator(obj) {
  let htmlContent = '';
  // 仅处理非空对象
  if (typeof obj === 'object' && obj !== null) {
    Object.entries(obj).forEach(([key, value]) => {
      if (typeof value === 'object' && value !== null) {
        // 递归遍历深层嵌套
        htmlContent += `<div><strong>${key}:</strong>${nestedJsonIterator(value)}</div>`;
      } else {
        // 普通值直接拼接
        htmlContent += `<div>${key}: ${value}</div>`;
      }
    });
  } else {
    htmlContent += obj;
  }
  return htmlContent;
}

// 使用示例（在处理_links时调用）
// if (key === '_links' && typeof value === 'object') {
//   const linkDiv = document.createElement('div');
//   linkDiv.innerHTML = nestedJsonIterator(value);
//   td.appendChild(linkDiv);
// }

额外注意事项 #

• 若JSON内容不可信，避免使用innerHTML，改用textContent配合动态创建元素的方式构建内容，防止XSS攻击。
• 遍历对象时务必判断值的类型，避免直接将对象转为字符串（会显示[object Object]）。

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