How to use node.js var in pugs java script?

I have a node file in which I am passing a variable to my pug file like this –

res.render("./products", 
          {pageTitle: "products",
           prods: prods_arr});

This is my prods array-

[{ Types: "Electronic",Brand: "Apple", Products: [ "MacBook Pro", "MacBook Air", "Mac Mini"]}, 
  {Types: "Electronic", Brand: "Dell", Products: [ "Inspioren", "Latitude"]},
  {Types: "Electronic", Brand: "Samsung", Products: [ "Galaxy S20", "Galaxy S10"]}]

I can use my prods array in my pug file to display its content. This is an example of my pug file-

select(name="type" onchange="change()")#type
    option(value="Null") Type
    for (products in prods) {
        option(value=products.Type) = #{procucts.Type}
    }

select(name="brands")#brands
     option(value="Null") Brand
     

But can’t use it inside the script tag. I want to loop through the prods array using js inside pug so that I can add the values as options for the brands selection box dynamically with an `onchange function. This is an example of how my js function should look like-

script.
    function change() {
        var type = document.getElementById("type").value;
        var brand = document.getElementById("brands");
        
        for (brands in prods) {
            if (brands.Type == type) {
                const brandOption = new Option(brands.Brand, brands.Brand);
                brand.add(brandOption, undefined);
            }
        }
    }

How can I use my prods array in pugs script tag??

Answer

You have to stringify your array

script.
  function change() {
    const type = document.getElementById("type").value;
    const brand = document.getElementById("brands");
    
    for (const prod of !{JSON.stringify(prods)}) {
      if (prod.Types === type) {
        const brandOption = new Option(prod.Brand, prod.Brand);
        brand.add(brandOption, undefined);
      }
    }
  }

!{JSON.stringify(prods)} returns a verbatim JSON string of the array and you can use JSON as object/array literals in JavaScript.

The output is

<script>function change() {
  const type = document.getElementById("type").value;
  const brand = document.getelementById("brands");
  
  for (prod in [{"Types":"Electronic","Brand":"Apple","Products":["MacBook Pro","MacBook Air","Mac Mini"]},{"Types":"Electronic","Brand":"Dell","Products":["Inspioren","Latitude"]},{"Types":"Electronic","Brand":"Samsung","Products":["Galaxy S20","Galaxy S10"]}]) {
    if (prod.Types === type) {
      const brandOption = new Option(prod.Brand, prod.Brand);
      brand.add(brandOption, undefined);
    }
  }
}</script>

You have multiple other errors in your code. This is the working code

select(name="type" onchange="change()")#type
    option(value="Null") Type
    each prod in prods 
      option(value=prod.Types) #{prod.Types}

select(name="brands")#brands
     option(value="Null") Brand

script.
  function change() {
    const type = document.getElementById("type").value;
    const brand = document.getElementById("brands");
    
    for (const prod of !{JSON.stringify(prods)}) {
      if (prod.Types === type) {
        const brandOption = new Option(prod.Brand, prod.Brand);
        brand.add(brandOption, undefined);
      }
    }
  }