javascript - 动态循环 Pug 变量

Question

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

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

使用变量groups，我可以像这样成功获取数组中的第一个对象和属性

"#{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]);  
    }

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

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

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

Answer 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>