Pug模板中如何实现嵌套对象的渲染？附代码示例

嘿，我看了你的Pug测试代码，问题出在嵌套数组的遍历逻辑上——你现在的写法没有正确遍历内层的listName数组，反而重复遍历了外层的list，而且直接访问val.listName.name也不对，因为listName是一个数组，不是单个对象。

修正后的代码 #

- var list = [ 
    { 
      "title": "- Course", 
      "link": "./course/index.html", 
      "listName":[ 
        { "name":"01 - HTML" }, 
        { "name":"02 - CSS" } 
      ] 
    }, 
  ]

ol
  each val in list
    li
      p= val.title
      ul
        // 遍历当前课程项的内层listName数组
        each item in val.listName
          li
            a(href=val.link, target="_blank")= item.name

关键说明 #

1. 你的数据结构是没问题的：外层是包含课程对象的数组，每个课程对象里又嵌套了listName数组存储子项。
2. 外层用each val in list遍历每个课程项，拿到单个课程的title、link和listName。
3. 针对每个课程的listName数组，需要再做一次内层遍历each item in val.listName，这样才能逐个取出里面的name值。
4. 内层的链接可以直接复用外层课程的val.link，确保所有子项都跳转到同一个课程页面。

这样修改后，Pug就能正确渲染出嵌套的列表结构啦～

内容的提问来源于stack exchange，提问作者Jesús Antonio Ugaz Vegas