Estoy tratando de usar Leaflet API y almacenar los puntos guardados de mis usuarios (marcadores, círculos, polígonos) en una base de datos MongoDB.
¿Existe una forma más elegante y dinámica de escribir un script JS en una página HTML mientras se obtienen los resultados de la base de datos?
en este momento estoy obteniendo mis datos de Mongo y pasándolos a través de la solicitud Get y usándolos en la página HTML, escribiendo EJS dentro del script JS. funciona bien, pero estoy buscando una solución mejor.
Muchas gracias por tu tiempo
// index.js router.get('/index', ensureAuthenticated, (req, res) => { var queryz = Points.find({ belongs_to: req.user._id }) queryz.exec(function (err, results) { if (err) return handleError(err); res.render('index', { user: req.user, points: results, }) }) }) // index.ejs // looping through the points from the database to dynamically add the points // each time the map is called <% if(typeof points != "undefined") { %> // making sure user is logged in <% counter = 1 %> <% if(points.length>0){ %> <% points.forEach(p => {%> <% if(p.type == "marker"){ %> // if point is a marker marker<%=counter%> = L.marker([<%=p.coords%>], { icon: <%=p.icon%>, alt: '<%=p.popup_message%>' }).bindPopup('<%=p.popup_message%><form method="post" action="/delete_point" id="pointFORM"><input id="pointID" name="pointID" value="<%=p._id%>"><button id="submitBtn" type="submit">🚫</button></form> ').openPopup() <% counter++%> <% } %> <% if(p.type == "circle"){ %> // if point is a circle marker<%=counter%> = L.circle([<%=p.coords%>], { color: '<%=p.color%>', fillColor: '<%=p.fill_color%>', fillOpacity: <%=p.fill_opacity%>, radius: <%=p.radius%> }).bindPopup('<%=p.popup_message%>').openPopup() <% counter++%> <% } %> <% if(p.type == "polygon"){ %> // if point is a polygon marker<%=counter%> = L.polygon([<%=p.coords%>], ).bindPopup('<%=p.popup_message%>').openPopup() <% counter++%> <% } %> <% });%> <% } %> <% } %>Supongo que el espacio problemático aquí es que desea obtener dinámicamente algunos datos de su servidor e insertarlos en una página web usando Javascript en la página web.
Ante eso, tienes varias opciones:
Puede hacer una llamada Ajax a su servidor y hacer que su servidor devuelva HTML completamente formado que su Javascript del lado del cliente puede insertar directamente en la página. Eso parece ser lo que ya está ilustrando en su pregunta.
Puede hacer una llamada Ajax a su servidor y hacer que su servidor devuelva JSON, que su Javascript del lado del cliente puede convertir en HTML e insertarlo en la página. Puede codificar manualmente la conversión a HTML en Javascript o puede usar la representación del lado del cliente con EJS para convertir los datos en HTML usando una plantilla EJS del lado del cliente.
Puede volver a cargar la página completa y dejar que el servidor muestre la página completamente nueva, presumiblemente incluyendo los datos más recientes.
Para las actualizaciones incrementales de una página, las opciones 1 y 2 son generalmente preferibles a la opción 3 y suelen ser más eficientes para todas.
La elección entre 1 y 2 es realmente solo una preferencia arquitectónica. Algunos desarrolladores de sitios de gran escala preferirían descargar la mayor cantidad posible de procesamiento al cliente y, por lo tanto, preferirían dejar que el cliente haga la representación del nuevo HTML como en la opción 2, pero eso significa que debe tener tanto la plantilla EJS como el lado del cliente. Representación EJS en la página web, que tiene más peso del lado del cliente. Entonces, eso también es una compensación.
Realmente no hay opciones que sean más simples que estas, así que si lo que tiene ahora (opción 1) funciona bien, puede quedarse con eso.