如何将数组变量从javascript传递到pug文件?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将数组变量从javascript传递到pug文件?相关的知识,希望对你有一定的参考价值。

我目前正在学习网站开发。我试图通过使用哈巴狗和javascript动态填充服务器端的页面。我的Pug代码如下

#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是一个mixin,他的代码如下

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
  |

我的javascript代码在这里

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

我的请求后我得到了一个有效的产品列表,我的问题是在页面呈现期间,似乎我没有正确地将数据链接到pug文件。我到处搜索,但我没有找到答案。

目前我有这样的错误:SyntaxError:意外的字符'#'

答案

首先,让我们从模板开始。您不必在模板中重新声明变量,它们已经存在。另请注意,如果变量不存在,那么each循环将不会执行,也不会输出任何内容。

试试这个:

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

然后,mixin内部也会出现问题。它期望看到四个变量输入,但第一行调用product.id,它不是mixin定义中列出的变量之一。传递整个产品对象而不是将其分离为单独的变量可能更好:

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

哪个会将您的模板更改为:

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

最后,您需要将整个产品列表从路径传递到模板中。只需将整个结果集从数据库传递到模板中,如下所示:

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

这会将产品数组传递到名为“product_list”的变量中的模板。

以上是关于如何将数组变量从javascript传递到pug文件?的主要内容,如果未能解决你的问题,请参考以下文章

试图将数组变量从 asp 传递给 javascript

将数组从 EJS 传递到 Javascript

范围和传递 Express/JavaScript - 如何传递数据库变量? [复制]

Django,如何将变量从 Django 管理员传递到模板?

设置临时变量并在pug模板中进一步重用它

通过表单将变量从 Javascript 传递到 C#?