Tech Stack:
My stack is Flask. Python with HTML, CSS, JS.
Background:
I have a variable myList. It's a list and it is passed from python to the frontend. This list is empty at the page load. This is the code for my GET request in my view function.
myListBackend.clear()
return render_template(
'page.html',
myList=myListBackend,
myListLength = len(myListBackend)
)
I am successfully able to access and use these variables in my template using:
<b> {{ myList[myListLength-1] }} </b>
Note that I only try to use this myList in the template when it is NOT empty. and it does get filled eventually. getting to it in a bit.
I have an a tag which acts as a button and calls a function named myFunc on click. The code for that is:
<a href="#" onclick="myFunc()"> › </a>
This a tag is only shown to the user based on the condition that the list is not empty. The code for that condition is:
{% if myListLength != 0 %}
The variable myList is only filled in views function in POST, don't worry about it, it does get filled (I have other use of that list and the content does show when i use/print it in html). The myFunc function which is called on click is defined in JS as below:
function myFunc(){
console.log("I am here"); // This line is important
if ( '{{myListLength}}' != 0 ){
console.log( '{{ myList[myListLength-1] | tojson }}' );
}
}
This function tries to access an index of myList variable which is passed from the python originally.
Problem:
When I load the page (GET request), It is giving me error in the console.log inside the if condition of the function myFunc. The error is:
TypeError: Object of type Undefined is not JSON serializable
The problem is that I am not calling myFunc anywhere else. And it is not printing the console.log of "I am here" (1st line of myFunc).
So, why is the program directly accessing the line of code which is using the index? I understand if the code is somehow going to that function then it will throw the error. But, I am not letting it go there if the list is empty. I also wrote that if condition to stop the flow if it is reaching there somehow, but that isnt seems to be doing anything.
I think this might be related to the behaviour of Jinja because it is ignoring console.log, so, it might be checking only the binding variable (the variable which is passed to template from backend) statements.
Since you are dealing with server side and client side languages, you have to separate clearly the processing of those two sides.
One idea would be to assign the list from Flask to a JavaScript variable and then process the variable in pure JavaScript.
So, your JavaScript part would become:
var list = JSON.parse('{{ myList | tojson }}');
function myFunc(){
if(list.length > 0){
console.log(list[list.length - 1]);
}
}