Tengo un archivo index.html que obtiene datos de app.py (extrayendo de MongoDB) usando render_template y estoy intentando leer los datos cargados en index.html en mi logic.js para poder crear un mapa de folleto. Sin embargo, parece que los datos no se cargan en mi logic.js. ¿Alguna idea?
Aquí está mi index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Visualization</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- Leaflet CSS --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" /> <!-- Leaflet JavaScript code --> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script> <!-- Our CSS --> <link rel="stylesheet" type="text/css" href="/static/css/style.css"> </head> <body> <div id="map"></div> <div class="container text-center"> <h1 class="p-3 mb-2 bg-secondary text-white">Map Visualization</h1> </div> <!-- confirm that data is loaded --> <!-- {% for i in html_results %} <h5>{{i}}</h5> {%endfor%} --> <script> let html_results = JSON.parse("{{html_results | tojson | safe}}") </script> <script src="{{url_for('static', filename='/js/logic.js')}}"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>