Pug 模板遍历 JSON 数据对象中的多个数组？

Question

我是哈巴狗的新手。我正在使用 JSON 文件来存储我在 pug 文件中使用的数据。这是我的数据结构：

{
  "nav": {
     "titles": [
      "location",
      "reservations",
      "accomodations",
      "amenities"
    ],
    "icons": [
      "img/sprite.svg#icon-location2",
      "img/sprite.svg#icon-book",
      "img/sprite.svg#icon-key",
      "img/sprite.svg#icon-glass"
    ]
  }
}

我知道如何遍历 JSON 中的单个数组。我的问题是如何将数据提取到模板中以从数据对象中取出一项以上。例如，我想循环从nav.json 文件中获取标题和图标。我的 pug 文件是这样的

li(class="top-nav__item")
  a(class="top-nav__link")
    svg(class="top-nav__icon")
      use(xlink:href=icon)
        span=title

我试过嵌套循环

each title in nav.titles
  each icon in nav.icons

并使用逻辑运算符

each title in nav.titles && each icon in nav.icons

然后像直接拉出物体

each n in nav

这些都不起作用。我如何在哈巴狗中做到这一点？我应该以不同的方式设置我的数据才能做到这一点吗？还是有不同的方式来循环和抓取数据？

Answer 1

title 和icon 对应，应该组合在一起。如果您的数据看起来像这样，您会更轻松地处理它：

{
  "nav": [{
    "title": "location",
    "icon": "img/sprite.svg#icon-location2"
  }, {
    "title": "reservations",
    "icon": "img/sprite.svg#icon-book"
  }, {
    "title": "accommodations",
    "icon": "img/sprite.svg#icon-key"
  }, {
    "title": "amenities",
    "icon": "img/sprite.svg#icon-glass"
  }]
}

或者，您可以each i in [0, 1, 2, 3] 并使用i 值将匹配的标题和图标从各自的数组中提取出来。但是依靠跨多个数组排列的数据是个坏主意。