Mi problema es que parece que no puedo modificar la variable que usa el archivo pug para hacer un bucle.
section.p-0.md-p-5.muli .flex.flex-wrap script. var users2 = '#{users}'; console.log(users2); /* const searchBar = document.getElementById('searchBar'); searchBar.addEventListener('keyup', (e) => { const search = e.target.value; const filteredFiles = users2[0].filter(user => { return user.toString[0][0].includes(search); }) console.log(filteredFiles); }); */ each user in users2 .w-100pc.md-w-33pc.p-10 a.block.no-underline.p-5.br-8.hover-bg-indigo-lightest-10.hover-scale-up-1.ease-300.filePage(href=`/${user.slug}`) img.w-100pc(src=`${user.photoUrl[0]}` alt='') p.fw-600.white.fs-m3.mt-3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed… .indigo.fs-s3.italic.after-arrow-right.my-4 3 days ago by JeffEn la línea 3, tengo una etiqueta de secuencia de comandos que establece una matriz de objetos pasada. Entonces quiero modificar esos objetos y pasar la nueva matriz filtrada al bucle en la línea 16. Sin embargo, no sé cómo pasar la variable de la línea 4 a la línea 16. Cuando ejecuto el código, aparece el error "No se puede leer la propiedad". 'longitud' de indefinido". ¿Alguna idea sobre cómo solucionar este problema? Gracias.
En todo momento hay que tener muy claro qué hay en el servidor y qué hay en el cliente .
El servidor (es decir, Pug) calcula y genera la salida Html. En esta etapa del servidor, no existe ningún navegador. Todas las variables utilizadas son variables en el servidor.
Cuando un usuario inicia un navegador para acceder a su página, el navegador recibe la salida Html generada anteriormente y cualquier comando de secuencia de comandos que contiene se ejecuta en el navegador. No hay existencia de Pug en este momento.
users2 , contenido en un bloque <script> , es una variable del lado del cliente. No existe cuando Pug se está ejecutando.
users es una variable del lado del servidor y, por lo tanto, está disponible para el código Pug.
El mensaje de error que recibe se puede solucionar con un simple cambio: each user in users .
//-Your `users` object is a SERVER variable. script. var users2 = '#{users}'; console.log(users2); //-The above, other than the substitution of #{users}, DO NOT RUN AT THE SERVER //-The below runs ONLY at the server, thus object `users` is available section.p-0.md-p-5.muli .flex.flex-wrap each user in users .w-100pc.md-w-33pc.p-10 a.block.no-underline.p-5.br-8.hover-bg-indigo-lightest-10.hover-scale-up-1.ease-300.filePage(href=`/${user.slug}`) img.w-100pc(src=`${user.photoUrl[0]}` alt='') p.fw-600.white.fs-m3.mt-3 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed… .indigo.fs-s3.italic.after-arrow-right.my-4 3 days ago by JeffAfortunadamente o desafortunadamente, no usó exactamente el mismo nombre para la variable de cliente. Puede confundirte completamente o puede iluminarte por completo. Por ejemplo, podría haber escrito lo siguiente y seguirá funcionando bien:
script. let users = '#{users}'; console.log(users); section each user in users img(src=user.photoUrl[0]) Bien, ahora a su requerimiento para modificar users . No puede, si está pensando en dejar que el cliente lo modifique y luego volver a Pug para usar el valor actualizado. Después de que el navegador recibe la salida Html, se desconecta del servidor. De manera similar, cuando Pug genera la salida Html, el navegador no existe. ¡No hay interacción entre el motor Pug y el motor Javascript del navegador!
El código comentado en su código de cliente no revela cómo desea modificar users . ¿Qué información adicional hay en el cliente que requiere que realice la modificación en el navegador en lugar de en el servidor? ¿Es porque necesita la entrada de un usuario (humano)? Debe publicar otra pregunta para describir la interacción que desea entre el navegador y el servidor. La respuesta probablemente requerirá llamadas Ajax o el envío de un formulario.