如何将JavaScript对象转换为自定义HTML树形结构？

需求说明 #

需要将层级结构的configuration对象转换为基于自定义<my-details>元素的HTML树形结构，每个节点需包含<my-icon>、名称插槽及嵌套的子节点。现有createHierarchy函数无法递归处理子节点，需补充递归逻辑实现嵌套结构。

给定配置对象 #

const configuration = {
  name: "General",
  icon: "general",
  children: [
    {
      name: "Line 1",
      icon: "line",
      children: [
        {
          name: "Area 1",
          icon: "area",
          children: [
            { name: "Y", icon: "x" },
            { name: "Z", icon: "z" },
          ],
        },
        { name: "Area 2", icon: "line" },
      ],
    },
    {
      name: "Line 2",
      icon: "line",
      children: [{ name: "Area 3", icon: "area" }],
    },
  ],
};

自定义HTML元素模板 #

<my-details>
  <div slot="summary"><my-icon name="${icon}"></my-icon> ${name}</div>
  ${childrenHtml} <!-- 子节点的HTML内容 -->
</my-details>

现有函数（存在问题） #

createHierarchy() {
  if (configuration?.length > 0) {
    const details = _configuration.map(({ name, icon }) => {
      return ` <my-details>
          <div slot="summary"><my-icon name="${icon}"></my-icon> ${name}</div>
          ${this.children}
         </my-details>`;
    });

    hierarchyContainer.innerHTML = details?.join("");
  }
}

解决方案：添加递归逻辑 #

核心是创建一个递归函数，用于处理单个节点及其所有子节点，生成对应的HTML字符串：

// 递归生成单个节点的HTML
function generateNode(node) {
  // 处理子节点：如果有children，递归生成每个子节点的HTML并拼接
  const childrenHtml = node.children?.length 
    ? node.children.map(child => generateNode(child)).join('')
    : '';

  // 拼接当前节点的HTML结构
  return `
    <my-details>
      <div slot="summary"><my-icon name="${node.icon}"></my-icon> ${node.name}</div>
      ${childrenHtml}
    </my-details>
  `;
}

// 修改后的createHierarchy函数
function createHierarchy() {
  let hierarchyHtml = '';
  
  // 兼容配置是单个对象或数组的情况
  if (Array.isArray(configuration)) {
    hierarchyHtml = configuration.map(node => generateNode(node)).join('');
  } else if (configuration) {
    hierarchyHtml = generateNode(configuration);
  }

  hierarchyContainer.innerHTML = hierarchyHtml;
}

逻辑说明 #

1. 递归函数generateNode：
   • 接收单个节点对象作为参数
   • 检查节点是否有children，如果有则递归调用自身处理每个子节点，将返回的HTML字符串拼接起来
   • 生成当前节点的<my-details>结构，将子节点HTML插入到对应位置
2. 修改后的createHierarchy：
   • 兼容配置是数组或单个对象的场景
   • 调用递归函数生成完整的树形HTML，插入到容器中

这样就能生成包含多层嵌套子节点的树形结构，完全匹配需求。

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