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

我收到了一个未捕获的SyntaxError：意外的标识符

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 var，因此这样做会将它们公开给客户端。

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变量

1 个答案: