动态循环通过 Pug 变量答案

【问题标题】：dynamically loop through Pug variables动态循环通过 Pug 变量
【发布时间】：2019-04-16 20:44:51
【问题描述】：

有没有办法用 javascript 动态循环遍历 Pug 变量？

我可以使用each.. in 函数成功地静态循环通过 Pug 变量，但可能需要重新运行循环以等待其他操作

有了变量groups，我可以像这样成功获取数组中的第一个Object和属性

"#{groups[0].group_name}"

并且成功的得到了数组的长度

"#{groups.length}"

这些代码的其余部分不起作用，这个代码一次只记录 [object Object] 一行。

script.
   for(k in "#{groups}"){
   console.log("#{groups}"[k]);
   }

我得到一个 Uncaught SyntaxError: Unexpected identifier

script.
    for(k in #{groups}){
        console.log(#{groups}[k]);  
    }

“无法读取未定义的属性 'group_name'”

script.
   for(i=0; i< "#{groups.length}"; i++){
      console.log("#{groups[i].group_name}");
    }

还尝试了groups.forEach 和groups.map 功能，但没有成功。任何帮助将非常感激！！

【问题讨论】：

How to pass variable from jade template file to a script file?的可能重复
script. 将使 pug 引擎忽略这些行，因为它应该用于客户端内联 JavaScript 代码。这意味着您不能在其中使用 pug 变量。请告诉我们目标是什么。服务器端迭代工作like this。
记住一旦页面渲染到浏览器，客户端的 pug 变量就消失了，所以将 pug 值保存到客户端，并使用JSON.parse()解析它
感谢您的快速回复。我的第一个任务是让客户建立/选择一个“团队”，该团队可以有多个“组”，并且组只能与一个团队相关联。客户可以有多个团队。我只想向客户展示哪些组与他们选择的团队相关联。我想通过对数据库的一次查询来完成此操作。
对；仍然不确定您在模板输出方面到底要做什么，但据我所知，主要问题是，根据您的第三个 sn-p，您移至循环，但移至顶部的 script.。如果只使用each循环，可以轻松输出一堆<span>元素等，例如：each g in groups和缩进span= g.group_name

标签： javascript node.js pug

【解决方案1】：

对服务器上的 Pug 变量进行字符串化。然后在客户端将字符串解析回一个对象。请记住，客户端无法访问 pug 变量，因此这样做会将它们暴露给客户端。

Check out the codepen result

- var groups = [{"group_name":"One"},{"group_name":"Two"},{"group_name":"Three"}]

script.
   let groups = JSON.parse('!{JSON.stringify(groups)}')
   for(i=0; i< groups.length; i++){
      console.log(groups[i].group_name);
    }

渲染后将如下所示：

<script>
   let groups = JSON.parse('[{"group_name":"One"},{"group_name":"Two"},{"group_name":"Three"}]')
   for(i=0; i< groups.length; i++){
      console.log(groups[i].group_name);
    }
</script>

【讨论】：

谢谢你，它完全有效！真是太感谢你了！！