title: dynamically loop through Pug variables
body: <p>Is there a way to dynamically loop through Pug variables with javascript? </p>
  
  <p>I can successfully statically loop through Pug variables with the <code>each.. in</code> function but may need to rerun the loop pending on other actions </p>
  
  <p>With a variable <code>groups</code>, I can successfully get the first Object and property in the array like this</p>
  
  <pre><code>"#{groups[0].group_name}"
  </code></pre>
  
  <p>And successfully the length of the array </p>
  
  <pre><code>"#{groups.length}"
  </code></pre>
  
  <p>The rest of these codes do not work, this one just logs [object Object] one line at a time. </p>
  
  <pre><code>script.
     for(k in "#{groups}"){
     console.log("#{groups}"[k]);
     }
  </code></pre>
  
  <p>I get an Uncaught SyntaxError: Unexpected identifier</p>
  
  <pre><code>script.
      for(k in #{groups}){
          console.log(#{groups}[k]);  
      }
  </code></pre>
  
  <p>"Cannot read property 'group_name' of undefined"</p>
  
  <pre><code>script.
     for(i=0; i&lt; "#{groups.length}"; i++){
        console.log("#{groups[i].group_name}");
      }
  </code></pre>
  
  <p>Also tried  <code>groups.forEach</code>,  and <code>groups.map</code> functions but no success. Any help would be much appreciated!!  </p>