I am writing a small application using Flask. My server code is as follows:

@app.route('/loadNext')
def loadNext():
    tmp = "Okay"
    return render_template("next.html",message = {"date_to":"from","date_from":tmp,"error_stat":[30,400,21,45],"mac_length":[7,7,7,7],"mac":[["1.1.1.1","1.2.1.2","3.2.1.1","3.1.4.5","1.3.2.4","5.5.4.3","2.1.6.7"],                                                       ["6.1.1.1","1.2.3.2","3.2.1.1","3.2.4.5","1.3.2.4","5.5.4.3","2.1.6.7"],                                                        ["9.1.1.1","4.2.1.2","3.2.1.1","3.7.4.5","1.3.2.4","5.5.4.3","2.1.6.7"],                                                        ["10.1.1.1","1.2.1.2","3.2.1.1","3.6.4.5","1.3.2.4","5.5.4.3","2.8.6.7"]]})

In my javascript code, I am using a for loop and accessing the values as follows:

$("#loadtable").ready(function(){
    alert("Inside function");
    for (i = 0; i < 7; i++) {
        var tmp = {{message.mac[0][i]|tojson|safe}}; 
        alert(tmp); 
    }        
});

But I am getting this error:

TypeError: Undefined is not JSON serializable

I think I should not use loop variable here. But what is the solution for it? Where am I going wrong?

I am writing a small application using Flask. My server code is as follows:

@app.route('/loadNext')
def loadNext():
    tmp = "Okay"
    return render_template("next.html",message = {"date_to":"from","date_from":tmp,"error_stat":[30,400,21,45],"mac_length":[7,7,7,7],"mac":[["1.1.1.1","1.2.1.2","3.2.1.1","3.1.4.5","1.3.2.4","5.5.4.3","2.1.6.7"],                                                       ["6.1.1.1","1.2.3.2","3.2.1.1","3.2.4.5","1.3.2.4","5.5.4.3","2.1.6.7"],                                                        ["9.1.1.1","4.2.1.2","3.2.1.1","3.7.4.5","1.3.2.4","5.5.4.3","2.1.6.7"],                                                        ["10.1.1.1","1.2.1.2","3.2.1.1","3.6.4.5","1.3.2.4","5.5.4.3","2.8.6.7"]]})

In my javascript code, I am using a for loop and accessing the values as follows:

$("#loadtable").ready(function(){
    alert("Inside function");
    for (i = 0; i < 7; i++) {
        var tmp = {{message.mac[0][i]|tojson|safe}}; 
        alert(tmp); 
    }        
});

But I am getting this error:

TypeError: Undefined is not JSON serializable

I think I should not use loop variable here. But what is the solution for it? Where am I going wrong?

• javascript
• python
• flask
• jinja2

• Are you still using var tmp = {{message.mac[0][i]}};? This issue was addressed in your previous question. – Rory McCrossan Commented Oct 26, 2015 at 15:24
• @RoryMcCrossan No I changed the code. But still it is not working. – sklearning Commented Oct 26, 2015 at 15:26

1 Answer 1

Jinja doesn't understand JavaScript. Jinja is rendered on the server, then the JavaScript is executed on the client. You can't take a variable i from a JavaScript loop and use it in a Jinja expression. Instead, set a JavaScript variable to the Jinja expression, then use that variable in your loop.

var message = {{ message|tojson }};
for (var i = 0; i < message['mac'][0].length; i++) {
    var item = message['mac'][0][i];
}

If you just want to output the data, there's no need to use JavaScript. Just render it directly in Jinja.

<ul>{% for item in message.mac[0] %}
    <li>{{ item }}</li>
{% endfor %}</ul>