Intenté trazar gráficos en mi aplicación web Flask usando Plotly, que no funcionó por alguna razón, así que comencé a simplificar el problema para encontrar el error.

Parece que hay un problema con la sintaxis de Jinja {{ myJSONfile | seguro }} en javascript.

Siempre que pase una cadena vacía "" a la variable, el gráfico representa, pero obviamente sin puntos de datos.

(Inspect Element Console da un token inesperado '{' Error al referirse al primer paréntesis de apertura de mi variable Jinja)

De acuerdo con esta publicación , debería haber escrito la sintaxis dentro del bloque de javascript correctamente para pasar un archivo JSON a la variable de javascript y no tengo ideas en este momento.

Agradecería si alguien tiene más ideas y me puede ayudar aquí :)

Ejemplo de código:

 {% extends "layout.html" %} {% block content %} <div class=" row p-4 "> <div class="card m-auto " style="width: 90%; " data-aos="fade-left "> <div class="card-body "> <div id="chart1 "></div> </div> </div> </div> <script src="https://cdn.plot.ly/plotly-latest.min.js "></script> <script> var graphs1 = { { graph1JSON | safe } }; Plotly.plot("chart1 ", graphs1, {}); </script>

Desde entonces, probé otro código de prueba de un repositorio tutorial de github para eliminar la posibilidad de que pudiera haber algunos errores de tipeo en mi código que no pude identificar. Pero esos ejemplos de copiar y pegar me dieron el mismo problema.

Probé diferentes cosas sugeridas en algunas publicaciones que encontré aquí en Stackoverflow

• verifiqué nuevamente si mis datos se guardaron correctamente en la variable JSON en app.py (lo cual sucede)
• usando comillas como: var graph1 = '{{ graph1JSON | a salvo }}'
• utilizando la sintaxis de código de bloque: var graph1 = {%block code %} {{ graph1JSON | seguro }} {% código de bloque final %}
• Varias combinaciones de la sintaxis anterior

Durante la depuración, veo claramente que el archivo JSON se creó correctamente y contiene los datos deseados, Flask/Jinja simplemente no quiere comunicarse con Javascript

Aquí hay una captura de pantalla adicional de cómo se ve el resaltado de sintaxis en mi código VS. (Aparte de en este caso particular, mi aplicación Flask funciona bien, puede representar páginas dinámicamente, etc.)

(Sintaxis no reconocida en la parte de javascript)