1

Is there a way to dynamically loop through Pug variables with javascript?

I can successfully statically loop through Pug variables with the each.. in function but may need to rerun the loop pending on other actions

With a variable groups, I can successfully get the first Object and property in the array like this

"#{groups[0].group_name}"

And successfully the length of the array 

"#{groups.length}"

The rest of these codes do not work, this one just logs [object Object] one line at a time. 

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

I get an Uncaught SyntaxError: Unexpected identifier

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

Also tried groups.forEach, and groups.map functions but no success. Any help would be much appreciated!!

BrianMiz
  • 1,101
  • 1
  • 10
  • 15
  • 1
    Possible duplicate of [How to pass variable from jade template file to a script file?](https://stackoverflow.com/questions/8698534/how-to-pass-variable-from-jade-template-file-to-a-script-file) – Get Off My Lawn Apr 16 '19 at 20:47
  • 1
    `script.` will make the pug engine ignore the lines, because it's supposed to be used for client-side inline JavaScript code. Which means you can't use pug variables in there. Please tell us what the goal is. Server-side iteration works [like this](https://pugjs.org/language/iteration.html). –  Apr 16 '19 at 20:50
  • 1
    Remember once the page is rendered to the browser, the pug variables are gone for the client, so save the pug value to the client, and parse it using `JSON.parse()` – Get Off My Lawn Apr 16 '19 at 20:50
  • 1
    Thank you for the quick responses. My first task is for a client to build/select a 'team' and the team can have multiple 'groups' , and groups can only be associated to one team. The client can have multiple teams. I just want to show the client what groups are associated to the team they selected. And I want to accomplish this with only one query to the database. – BrianMiz Apr 16 '19 at 21:48
  • 1
    Right; still not sure what exactly you're trying to do in terms of template output, but the main issue as far as I can tell is that as per your 3rd snippet, you moved to a loop but to `script.` on top. If you just use an `each` loop, you can easily output a bunch of `` elements or the like, for instance: `each g in groups` and indented `span= g.group_name` –  Apr 16 '19 at 22:32
  • 1
    I could use an each loop but that would show all groups. my goal is to only show what groups are associated to the team selected. and I could do that if I could loop through the groups more than once. – BrianMiz Apr 16 '19 at 23:07

1 Answers1

3

Stringify the Pug variable on the server. Then on the client side parse the string back into an object. Remember that the pug vars are not accessible on the client, so doing this will expose them to the client.

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

Once rendered it will look like this:

<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>
Get Off My Lawn
  • 34,175
  • 38
  • 176
  • 338