如何从动态项目结构对象数组生成层级数据并展示为表格？

一、数据层级转换（生成title/child/subchild结构） #

核心逻辑是拆分每个项目的path字段，将任意深度的目录路径映射为三级结构：不足三级的层级留空，超过三级的部分合并到subchild中，同时保留类型区分文件夹与文件。

JavaScript 实现代码 #

function transformDirectoryData(rawData) {
  const transformed = [];
  
  rawData.forEach(item => {
    const pathSegments = item.path.split('/');
    let title = '', child = '', subchild = '';

    switch(pathSegments.length) {
      case 1:
        title = item.name;
        break;
      case 2:
        title = pathSegments[0];
        child = item.name;
        break;
      case 3:
        title = pathSegments[0];
        child = pathSegments[1];
        subchild = item.name;
        break;
      default:
        // 深度超三级时，前两级为title/child，剩余路径合并为subchild
        title = pathSegments[0];
        child = pathSegments[1];
        subchild = pathSegments.slice(2).join('/');
    }

    transformed.push({
      title,
      child,
      subchild,
      type: item.type, // 区分文件夹(tree)和文件(blob)
      id: item.id
    });
  });

  // 按层级排序，让结构更规整
  return transformed.sort((a, b) => {
    if (a.title !== b.title) return a.title.localeCompare(b.title);
    if (a.child !== b.child) return a.child.localeCompare(b.child);
    return a.subchild.localeCompare(b.subchild);
  });
}

// 使用示例
const transformedData = transformDirectoryData(a);

二、表格渲染（展示三级层级） #

基于转换后的数据，生成带样式的表格，通过视觉合并重复层级、区分文件夹与文件，匹配目标样式需求。

HTML + 渲染代码 #

<style>
  .directory-table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
    font-family: monospace;
  }
  .directory-table th, .directory-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
  }
  .directory-table th {
    background-color: #f5f5f5;
    font-weight: bold;
  }
  .folder-item {
    font-weight: bold;
    color: #2c3e50;
  }
  .empty-cell {
    color: #999;
    font-style: italic;
  }
</style>

<table class="directory-table">
  <thead>
    <tr>
      <th>Title</th>
      <th>Child</th>
      <th>Subchild</th>
    </tr>
  </thead>
  <tbody id="directory-body"></tbody>
</table>

<script>
function renderDirectoryTable(data) {
  const tbody = document.getElementById('directory-body');
  tbody.innerHTML = '';

  let prevTitle = '';
  let prevChild = '';

  data.forEach(item => {
    const tr = document.createElement('tr');
    
    // Title单元格：相同title视觉合并
    const titleTd = document.createElement('td');
    if (item.title === prevTitle) {
      titleTd.textContent = '';
      titleTd.classList.add('empty-cell');
    } else {
      titleTd.textContent = item.title;
      if (item.type === 'tree') titleTd.classList.add('folder-item');
      prevTitle = item.title;
    }
    
    // Child单元格：相同title下的重复child视觉合并
    const childTd = document.createElement('td');
    if (item.child === prevChild && item.title === prevTitle) {
      childTd.textContent = '';
      childTd.classList.add('empty-cell');
    } else {
      childTd.textContent = item.child || '';
      if (item.type === 'tree' && item.path.split('/').length === 2) childTd.classList.add('folder-item');
      prevChild = item.child;
    }
    
    // Subchild单元格：直接显示内容，标记文件夹
    const subchildTd = document.createElement('td');
    subchildTd.textContent = item.subchild || '';
    if (item.type === 'tree' && item.path.split('/').length >=3) subchildTd.classList.add('folder-item');

    tr.appendChild(titleTd);
    tr.appendChild(childTd);
    tr.appendChild(subchildTd);
    tbody.appendChild(tr);
  });
}

// 渲染表格
renderDirectoryTable(transformedData);
</script>

关键说明 #

• 样式上通过folder-item类加粗文件夹名称，empty-cell处理合并后的空单元格，提升层级可读性
• 渲染逻辑对重复的title/child进行视觉合并，避免冗余显示
• 完全兼容任意深度的目录结构，自动适配不同层级的文件与文件夹

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