How to pass an array variable from javascript to a pug file?

Question

I am currently learning web development. I am trying to dynamically fill a page on server side by using pug and javascript. My Pug code is below

#products-list.products 
    - var product_list = #{product_list}
    -if(product_list)
      each product in product_list
        +product_element(product['name'],product['price'],product['image'])

product_element is a mixin, his code is below

mixin product_element(name,prod_price,image)
a(href='./produits/${product.id}' title='En savoir plus...')
h2= name
img(alt='product' src='./assets/img/'+image)
p.price= prod_price
  small Prix
  |

My javascript code is here

router.get("/produits", (req, res) => {dataBase.getProducts(null,null).then(
(products)=>{
  if(products)
  {
    console.log('Get /produits sending..');
    res.render("products", {
                            titre: "OnlineShop - Produits", 
                            products_count: products.length+" produits",
                            products_list:JSON.stringify(products)
                            });
  }
}).catch(
(err)=>{
});});

I get a valid products list after my request , my problem is during the rendering of the page, it seems that I dont correctly link the data to the pug file. I have searched everywhere but I havent found an answer.

Currently I have this error : SyntaxError: Unexpected character '#'

Answer 1

First, let's start with the template. You don't have to re-declare variables inside the template, they are already there for you. Also note that if a variable doesn't exist then the each loop won't execute and nothing will be output.

Try this instead:

#products-list.products 
  each product in product_list
    +product_element(product['name'],product['price'],product['image'])

Then, there will also be issues inside the mixin. It expects to see four variables input but the very first line calls product.id which is not one of the variables listed in the mixin definition. It would probably be better just to pass in the entire product object instead of separating it out into separate variables:

mixin product_element(product)
a(href= './produits/' + product.id title='En savoir plus...')
  h2= product.name
  img(alt='product' src='./assets/img/'+ product.image)
  p.price= product.price
    small Prix

Which would change your template to this:

#products-list.products 
  each product in product_list
    +product_element(product)

Finally, you need to pass the entire products list from the route into the template. Simply pass the the entire resultset from the database into the template like this:

router.get("/produits", (req, res) => {dataBase.getProducts(null,null).then(
(products)=>{
  if(products)
  {
    console.log('Get /produits sending..');
    res.render("products", { "product_list": products });
  }
}).catch(
(err)=>{
});});

This passes the array of products through to the template in a variable named "product_list".