0

Estoy trabajando en NODEJS y express, en mi archivo middelware routes/md.js proceso una petición a la base de datos y como resultado tengo un ARREGLO.

Necesito que ese arreglo sea leído por un archivo estático public/js/estatico.js que es llamado directamente por el HTML.

¿alguna recomendación?

 session
    .run("MATCH (n: Portal) RETURN n ORDER BY n.nombre ")
    .then(function(result){
      var portalArr =[];

      result.records.forEach(function(record){
        vCabeza.push({//guarda los nombre de cada png
          nombre: record._fields[0].properties.nombre
        });
      });

El código se ejecuta sin problema, si yo lo inserto directamente en la página con un render de ejs imprime los nombres de los archivos png. Pero lo que necesito es poder leer los nombres del archivo desde el js que llamo del html para que se inserten las imagenes

const vCabeza=["mChina.png","mGorro.png", "mLentes.png", "mPirata.png"];//Actualmente esta constante hace que funcione la pagina, lo que necesito es que el valor de esta constante, provenga de busqueda arrojada por la base de datos.


function construyeHTML(img){
		var valor=[]; var top=7; var left=22;

	img.forEach (function(n){ //corro el arreglo donde están los nombres de los archivos
		var codigo= `<div class="itemPerfil" id="${valor.length}" style=" top:${top}px; left:${left}px;" onmouseover="getId(this)" onclick="getIdClick(this)"> <img src="imagenes/mikaOutfit/${n}"> </div>`;
		switch(valor.length){ //elige los valores too y left del estilo de acuerdo a la posición que ocupará y guarda el codigo en un arreglo
			case 0:
			valor.push(codigo);
			left=left+148;
			break;

			case 4: case 8: case 12: case 16:
			left=2;
			top=top+58; 
			valor.push(`<div class="itemPerfil" id="${valor.length}" style=" top:${top}px; left:${left}px;" onmouseover="getId(this)" onclick="getIdClick(this)"> <img src="imagenes/mikaOutfit/${n}"> </div>`);
			left=left+148;
			break;

			default:
			valor.push(codigo);
			left=left+148;
		}

		var items=document.getElementById("contenedorItems"); //toma el div del html
		valor.forEach(function(a){//corre el arreglo e inseta el código en la página
		items.innerHTML = valor;
		});

	});
}//fin de function construyeHTML

function perfilItems(variable) { //recibe la orden del HTML y ejecuta la función
	construyeHTML(variable);
} //fin de function perfilItems
<html>
<head>
<meta charset="UTF-8">
<title>Womg</title>
<link  rel="stylesheet" type="text/css" href="css/armario.css"/>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/armario.js"></script>

</head>

<body background="imagenes/fondoRojo.jpg" >




  <div id="pantalla">
  		<div id="contenedorItems"> </div>
  		<div id="nombreItem"> a<br>q<br>u<br>i<br><br>n<br>o<br>m<br>b<br>e<br> </div>
  		<img class="mika" src="imagenes/espacioItems.png" usemap="#controles" alt="fondo">
  			<map name="controles" id="controles">
    				<area shape="rect" coords= "1479,265,1579,365"  onClick="perfilItems(vCabeza)">
  			</map>

2
  • Muéstranos el código del middleware para entender mejor
    – ffflabs
    Commented el 20 mar. 2018 a las 10:46
  • inserté el código del middelware (que funciona) el html y el js estático. @amenadiel
    – mmcuervo
    Commented el 20 mar. 2018 a las 11:57

1 respuesta 1

1

Lo que quieres hacer no parece un caso de uso para un middleware, puesto que éste se ejecuta cuando haces un request, el cual iría cambiando el contenido del archivo y produciendo una eventual race condition.

Sería mejor que en la ruta que renderea tu plantilla pasaras el valor de vCabeza como variable de plantilla:

app.get('/', function(req, res, next) {

    session
    .run("MATCH (n: Portal) RETURN n ORDER BY n.nombre ")
    .then(function(result){
      var vCabeza =[];

      result.records.forEach(function(record){
        vCabeza.push({//guarda los nombre de cada png
          nombre: record._fields[0].properties.nombre
        });
      }); 

      res.render('plantilla', { vCabeza: vCabeza });  
    });

});

Y luego usarlo en tu plantilla como:

onClick="perfilItems(<%= vCabeza %>)"

(ignoro qué es session ya que puedes hacerle consultas, por lo que deduzco que no es la sesión de express. Tampoco estoy seguro de la sintaxis de ejs porque uso handlebars, pero como te digo, lo correcto es pasar vCabeza como una variable del template y no mediante un script escrito al vuelo).

Si distintas rutas van a usar vCabeza entonces puede que sí tenga sentido usar un middleware al estilo:

app.use(function(req, res, next) {

   session
   .run(...)
   .then(function(result) {
      ...código que llena vCabeza...
      req.vCabeza = vCabeza;
      next();
   });

});

Y luego llamar al render con

res.render('plantilla', { vCabeza: req.vCabeza }); 
1
  • Muchas gracias, me ayudó mucho la respuesta. session conecta con el driver de las Base de Datos Neo4j @amenadiel
    – mmcuervo
    Commented el 20 mar. 2018 a las 23:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.