2017-10-19 6 views
1

Je suis en train de construire un tableau avec quelques coordonnées de test à utiliser avec OpenLayers Overlays.ne peut pas pousser la variable EJS dans le tableau dans le scripttag html?

Voici le code:

var parada = []; 

for(var i = 0; i < <%- coords.length%>; i++){ //First loop to fill the array 

    var arr = [<%- coords[i].lon %>, <%- coords[i].lat %>]; //THIS IS THE ERROR LINE! ... says the console... 
    parada.push(arr); 

} 

var overlays = []; 

for (i = 0; i < parada.lenght; i++) { //Second loop to build the overlays 
    overlays.push(new ol.Overlay({ 
     position: ol.proj.fromLonLat([parada[i][0], parada[i][1]]), //With the data of the array above 
     positioning: 'center-center', 
     element: document.getElementById('parada' + i), 
     stopEvent: false 
    })); 

} 

for (i = 0; i<overlays.length; i++){ // Last loop to assign the overlays. 
    map.addOverlay(overlays[i]); 
} 

IMPORTANT: dans mon fichier app.js, coords est défini comme un tableau d'objets (que je trouve ({}) dans MongoDB).

Je suis vraiment coincé ici s'il vous plaît aider! Merci! : DDD

Répondre

0

Votre variable i existe dans le JS côté client, pas dans le JS côté serveur.

Il y a toutes sortes de façons dont vous pouvez résoudre ce problème, dont un serait:

var parada = <%- JSON.stringify(coords.map(function(pair) { 
    return [pair.lon, pair.lat]; 
})) %>; 

Je suppose que lon et lat vont toujours être des nombres, de sorte qu'il n'y a pas un risque d'attaques par injection.

Vous pouvez également effectuer la transformation avant d'appeler le modèle, afin d'éviter cette complexité.

Incidemment, vous avez également une faute de frappe dans lenght.

+0

Merci! il semble fonctionner :) J'ai mis votre code dans le fichier app.js comme vous l'avez dit. Encore une chose: comment puis-je appeler la variable maintenant dans l'EJS? <%= %>? <% = parada [0]%> ou <% = parada [0] .lon%> les deux ne semblent pas fonctionner ... Merci beaucoup pour votre aide! Vous êtes génial: D –

+0

@AlanSchwarz La variable 'parada' existe uniquement dans le JS côté client, pas dans le JS côté serveur. Le code à l'intérieur du '<% %>' est complètement séparé du code à l'extérieur, c'est juste une coïncidence que les deux utilisent JavaScript. Du point de vue d'EJS, seul le code à l'intérieur du '<% %>' est interprété comme du code, les bits à l'extérieur ne sont que du texte arbitraire à jeter. Le texte généré par le modèle est ensuite envoyé au navigateur (vous pouvez le voir dans les outils de développement) et le navigateur exécute ensuite le code généré. Les deux sont des processus totalement distincts. – skirtle

0

Apporté un changement de sorte qu'il serait plus facile de travailler avec les données du côté client.

var lon = []; 
    var lat = []; 
    for (var i = 0; i < <%=lon.length%>; i++) {<%for(var x = 0; x < lon.length ;x++) { %> 
     lon.push(<%= lon[x] %>); 
     lat.push(<%= lat[x] %>); 
    <% } %>} 

De cette façon, je construis un tableau avec EJS du côté client.

//Create the Overlays Array 
    var overlays = []; 

    for (var i = 0; i < <%=lon.length%>; i++) { 
     overlays.push(new ol.Overlay({ 
      position: ol.proj.fromLonLat([lon[i], lat[i] ]), 
      positioning: 'center-center', 
      element: document.getElementById('parada' + i), 
      stopEvent: false 
     })); 
    } 

Et puis je peux simplement utiliser ce tableau là où j'en ai besoin.

Merci pour l'aide @skirtle, vous m'a donné compréhension sur le problème;)