动态循环 Pug 变量

Question

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

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

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

"#{groups[0].group_name}"

并成功得到数组的长度

"#{groups.length}"

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

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

我收到一个未捕获的语法错误：意外的标识符

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

"Cannot read property 'group_name' of undefined"

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

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

Answer 1

将服务器上的 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>

动态循环 Pug 变量

dynamically loop through Pug variables

javascript

node.js

pug