Pila de tecnología :
Mi pila es Flask. Python con HTML, CSS, JS.
Antecedentes :
Tengo una variable myList. Es una lista y se pasa de python a la interfaz. Esta lista está vacía en la carga de la página. Este es el código para mi solicitud GET en mi función de vista.
myListBackend.clear() return render_template( 'page.html', myList=myListBackend, myListLength = len(myListBackend) )Puedo acceder y usar con éxito estas variables en mi plantilla usando:
<b> {{ myList[myListLength-1] }} </b> Tenga en cuenta que solo trato de usar esta myList en la plantilla cuando NO está vacía. y finalmente se llena. llegar a ello en un rato.
Tengo una etiqueta que actúa como un botón y llama a una función llamada myFunc al hacer clic. El código para eso es:
<a href="#" onclick="myFunc()"> › </a>Esta etiqueta solo se muestra al usuario con la condición de que la lista no esté vacía. El código para esa condición es:
{% if myListLength != 0 %}La variable myList solo se completa en la función de vistas en POST, no se preocupe, se llena (tengo otro uso de esa lista y el contenido se muestra cuando lo uso/imprimo en html). La función myFunc que se llama al hacer clic se define en JS de la siguiente manera:
function myFunc(){ console.log("I am here"); // This line is important if ( '{{myListLength}}' != 0 ){ console.log( '{{ myList[myListLength-1] | tojson }}' ); } }Esta función intenta acceder a un índice de la variable myList que se pasa originalmente desde Python.
Problema :
Cuando cargo la página (solicitud GET), me está dando un error en el archivo console.log dentro de la condición if de la función myFunc. el error es:
TypeError: el objeto de tipo Undefined no es JSON serializable
El problema es que no estoy llamando a myFunc ningún otro lugar. Y no está imprimiendo el console.log de "I am here" (primera línea de myFunc ).
Entonces, ¿por qué el programa accede directamente a la línea de código que usa el índice? Entiendo que si el código de alguna manera va a esa función, arrojará el error. Pero, no lo dejaré ir allí si la lista está vacía. También escribí que si la condición para detener el flujo está llegando allí de alguna manera, pero eso no parece estar haciendo nada.
Creo que esto podría estar relacionado con el comportamiento de Jinja porque está ignorando console.log , por lo que podría estar verificando solo las declaraciones de la variable de enlace (la variable que se pasa a la plantilla desde el backend).
Dado que se trata de lenguajes del lado del servidor y del lado del cliente, debe separar claramente el procesamiento de esos dos lados.
Una idea sería asignar la lista de Flask a una variable de JavaScript y luego procesar la variable en JavaScript puro.
Entonces, su parte de JavaScript se convertiría en:
var list = JSON.parse('{{ myList | tojson }}'); function myFunc(){ if(list.length > 0){ console.log(list[list.length - 1]); } }