使用 Jade 迭代同时获取键和索引答案

【问题标题】：Get both the key and the index using Jade iteration使用 Jade 迭代同时获取键和索引
【发布时间】：2013-10-03 20:32:37
【问题描述】：

如此处所述：http://jade-lang.com/reference/，获取索引或键很容易。但是有没有办法两者兼得？

这个：

ul
  each val, index in {"day": "Wed", "link": "url", "message": "three"}
    li#item-= index + ': ' + val

输出这个：

<ul>
  <li id="item-">day: Wed</li>
  <li id="item-">link: url</li>
  <li id="item-">message: three</li>
</ul>

但我想要这个：

<ul>
  <li id="item-0">day: Wed</li>
  <li id="item-1">link: url</li>
  <li id="item-2">message: three</li>
</ul>

【问题讨论】：

请注意，JavaScript 不保证对象中键的顺序。 stackoverflow.com/questions/5525795/…

标签： html templates loops iteration pug

【解决方案1】：

我认为只有在遍历数组时才能获得索引，因此翡翠文档与它的示例有点混淆。我将为您提供三个选项来完成此操作。选择你自己的冒险！

选项 1：保留您的原始输入并建立您自己的索引

ul
  -var index = 0
  each val, key in {day: "Wed", link: "url", message: "three"}
    li(id="item-#{index++}") #{key}: #{val}

选项 2：将输入更改为数组数组

ul
  each val, index in [["day", "Wed"], ["link", "url"], ["message", "three"]]
    li(id="item-#{index}") #{val[0]}: #{val[1]}

选项 3：将输入更改为对象数组

ul
  each val, index in [{day: "Wed"}, {link: "url"}, {message: "three"}]
    li(id="item-#{index}") #{Object.keys(val)[0]}: #{val[Object.keys(val)[0]]}

第一个选项可能是您想要的，但其他选项可能会很有趣。

【讨论】：

谢谢。它让我走上了正轨，但分配属性不适用于(id="item-#{index}") 语法。这种更多的 Javascripty 语法对我有用：(id="item-"+index)。也许自原始帖子以来 Jade 版本/语法发生了变化？ [codepen 上面每个例子的例子|codepen.io/anon/pen/aBavMG]

【解决方案2】：

只是为了补充这个已经回答的问题，我无法让其中任何一个与 PyJade 可靠地工作。我找不到向我推荐此提示的页面，但它对我来说非常有用。

将此添加到您的 __init__.py 文件以将 enumerate 函数添加到您的 pyjade 环境中。

app.jinja_env.globals.update(enumerate=enumerate)

然后，您可以像任何其他 Python 枚举循环一样在模板中使用它：

for idx, val in enumerate(list_of_whatevs)
    {{ idx }}, {{ val }}

干杯

【讨论】：

【解决方案3】：

使用Object.entries()（和 Pug 2.0.4）的另一个选项：

ul
  each entry, index in Object.entries({day: 'Wed', link: 'url', message: 'three'})
    - const [key, val] = entry
    li(id=`item-${index}`) #{key}: #{val}

【讨论】：