如何在 pugs java 脚本中使用 node.js 变量？

Question

我正在将一个变量从我的服务器端（节点）文件传递到我的客户端 pug 文件-

const prods_arr = [
   {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"]}
];

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

我正在 pug 文件中显示 prods 数组的内容 -

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"

现在我想在脚本标签中使用 prods 数组。

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

如何在脚本标签中使用我的 prods 数组？？

Answer 1

你不能那样做。 prods 是服务器端变量，您必须调整它才能从客户端访问它。最好的建议是不要那样做。但是，调整是在将其发送到客户端之前将其呈现为 HTML 中的 JSON 字符串，然后在客户端 JS 中读取它。

示例：

<meta name="prods" content="{{ JSON.stringify(prods) }}">

const prods = JSON.parse(document.querySelector('meta[name="prods"]').content);
console.log(prods);

Answer 2

您必须对数组进行字符串化

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 数组的逐字 JSON 字符串，您可以将 JSON 用作 JavaScript 中的 object/array 文字。

输出为

<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>

您的代码中还有多个其他错误。这是工作代码

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

如何在 pugs java 脚本中使用 node.js 变量？

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

javascript

node.js

pug