如何用Handlebars输出MongoDB嵌套文档的层级结构

问题背景 #

我有一个名为categories的MongoDB集合，结构如下：

{ _id, name, tree }

示例数据：

{ _id: "639...bc78", name: "ABC", tree: null},
{ _id: "63d...c891", name: "DEF", tree: null},
{ _id: "63f...718d", name: "yyy", tree: ",ABC,"}

其中yyy是ABC的子分类。目前用Handlebars遍历所有数据输出时，父分类会先全部显示，再显示子分类，但我需要子分类紧随对应的父分类输出，期望效果：

639...bc78    ABC
              TREE: yyy
63d...c891    DEF

解决方案 #

1. 在Express后端整理嵌套数据结构 #

Handlebars不擅长处理复杂的关联数据遍历，建议先在Express查询数据后，把父子分类整理成嵌套结构，再传给模板。

示例代码（假设用Mongoose操作MongoDB）：

// 路由中查询并处理数据
router.get('/', async (req, res) => {
  // 查询所有分类数据
  const categories = await Category.find({});
  
  // 筛选出所有父分类（tree为null的条目）
  const parentCats = categories.filter(cat => cat.tree === null);
  
  // 给每个父分类匹配对应的子分类，生成嵌套结构
  const structuredCats = parentCats.map(parent => {
    // 根据tree字段匹配子分类（你的tree格式是",ABC,"，用includes匹配父分类name）
    const children = categories.filter(child => child.tree.includes(parent.name));
    return {
      ...parent.toObject(), // 将Mongoose文档转为普通对象
      children: children
    };
  });
  
  // 把整理好的嵌套数据传给模板
  res.render('categories', { categories: structuredCats });
});

2. 修改Handlebars模板实现交错输出 #

基于整理后的嵌套数据，用嵌套的{{#each}}即可实现子分类紧随父分类的效果：

<table>
  {{#each categories}}
    <!-- 输出父分类行 -->
    <tr>
      <td>{{_id}}</td>
      <td>{{name}}</td>
    </tr>
    <!-- 输出当前父分类的所有子分类 -->
    {{#each children}}
    <tr>
      <td></td>
      <td>TREE: {{name}}</td>
    </tr>
    {{/each}}
  {{/each}}
</table>

补充注意事项 #

• 如果后续有多层嵌套需求，建议把tree字段改成存储父分类的_id而非name，避免分类重名导致匹配错误。
• 若不用Mongoose，直接用MongoDB原生驱动，把parent.toObject()替换成JSON.parse(JSON.stringify(parent))即可完成文档到普通对象的转换。

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