CODEWITHSUNDEEP
flaskjinja2
Clive Long
Clive Long

Reputation: 294

Extracting fields from a database using Flask and jinja2

I am developing my code in Pythonanywhere. I am trying to modify and extend some code from a course.

I am modifying code that prints records from a database in order to extract a particular field value from each record, then find the maximum value of all values of that field in the database.

I have copied and renamed the following code within flask_app.py that just gets all records from the database

@app.route('/listmaxidv2')
def listmaxidv2():
with sqlite3.connect("MyFilms2.db") as conn:
    cursor = conn.cursor()
    sql = """SELECT * FROM tblFilms"""
    cursor.execute(sql)
    rows = cursor.fetchall()
    return render_template("/listmaxidv2.html", rows=rows)

then in the listmaxidv2.html template that gets rendered, I am trying to isolate each value of that first field. I have tried quite a few things and my last attempt was as below but i am not sure the javascript is actualy executing (yes it is a bit of a mess). Is there something obvious in this that indicates why I'm not getting at the first fields in the records?

<!doctype html>

<html>

<link rel="stylesheet" href="static/filmv2.css">
<script>
function getids(in_var){

if (isNaN(in_var)){

var ret_val = "invalid film id" + in_var;
}
else{
var ret_val = "Valid film id" + in_var;
}
return ret_val;
}
var func_ret = 0
{% for row in rows %}

func_ret =  getids({{row[0]}});
document.getElementById("id_fdbk").innerHTML = func_ret;
func_ret;
{% endfor %}
document.getElementById("testHTML").innerHTML = "Test text to HTML id";

</script>

<body>

<h1> Find maximum film ID </h1>
<h2> Generate next free film ID </h2>
<input type='button' value='Go' onclick='getids(017)';'>
<p id="id_fdbk"></p>
<p id="testHTML"></p>


</body>

</html>

Upvotes: 0

Views: 965

Answers (1)

abigperson
abigperson

Reputation: 5362

You are misunderstanding the way Jinja works... Jinja in a python library, hence, it executes server side and javascript code executes client side so you can't mix the two as you're trying to do here...

Good news is you can adjust for this fairly simply like so...

<!doctype html>

<html>

<link rel="stylesheet" href="static/filmv2.css">
<script>

    var raw_data = {{ rows|tojson }};

    function getids(in_var){
        return isNaN(in_var) ? "invalid film id" + in_var : "Valid film id" + in_var;
    }
    var func_ret = 0

    raw_data.forEach(function(row) {
        func_ret =  getids(row);
        document.getElementById("id_fdbk").innerHTML = func_ret;
    });

    document.getElementById("testHTML").innerHTML = "Test text to HTML id";

</script>

<body>

<h1> Find maximum film ID </h1>
<h2> Generate next free film ID </h2>
<input type='button' value='Go' onclick='getids(017)';'>
<p id="id_fdbk"></p>
<p id="testHTML"></p>


</body>

</html>

I couldn't quite make out what you are trying to do above. E.g. this code is just going to overwrite the same HTML element for each item in your list. I suspect you are just trying to get something working...

By using the Jinja's tojson filter you can tell Jinja to pass this information into your template so that javascript may use this as a native object.

Please note if you're using Flask < 0.10 you would also need the safe filter like they have shown in the documentation linked above. (I.e. var raw_data = {{ rows|tojson|safe }};)

Upvotes: 2

Related Questions