Estoy pasando una variable de mi archivo (nodo) del lado del servidor a mi archivo pug del lado del cliente-
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 }); Estoy mostrando el contenido de la matriz prods en el archivo pug:
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" Ahora quiero usar la matriz prods dentro de la etiqueta del script.
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); } } } ¿Cómo puedo usar mi matriz de prods en la etiqueta del script?
Tienes que encadenar tu matriz
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)} devuelve una cadena JSON textual de la matriz y puede usar JSON como literales de objeto/matriz en JavaScript.
la salida es
<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>Tienes muchos otros errores en tu código. Este es el código de trabajo
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); } } }No puedes hacerlo así. prods es una variable del lado del servidor, debe modificarla para acceder a ella desde el lado del cliente. La mejor sugerencia sería no hacer eso. Sin embargo, la modificación sería representarlo como una cadena JSON en el HTML antes de enviarlo al cliente y luego leerlo en el JS del lado del cliente.
Ejemplo:
<meta name="prods" content="{{ JSON.stringify(prods) }}"> const prods = JSON.parse(document.querySelector('meta[name="prods"]').content); console.log(prods);