Iterating multiple lists in parallel with Python inside HTML (Flask) - python

I am building a python web app hosted on pythonanywhere following this tutorial loosely. I am modifying the resulting application to fit my own goal.
Here is my python code that I am using to pass variables to a HTML document in order for them to be added to a table using a for loop:
from flask import Flask, redirect, render_template, request, url_for
app = Flask(__name__)
app.config["DEBUG"] = True
productnames = []
reviews = []
#app.route("/", methods=["GET", "POST"])
def index():
if request.method == "GET":
return render_template("main.html", reviews=reviews, productnames=productnames)
reviews.append(request.form["review"])
productnames.append(request.form["products"])
return redirect(url_for('index'))
Using the following code within my HTML, I am looping through that list and adding each item to the table:
{% for review in reviews %}
<tr>
<td></td>
<td>{{ review }}</td>
<td></td>
</tr>
{% endfor %}
And this works, however, I am trying to iterate through multiple lists and found various statements saying that the zip function was what I was looking for so I changed my HTML code to the following segment and it no longer works.
{% for review, product in zip(reviews, productname) %}
<tr>
<td>{{ product }}</td>
<td>{{ review }}</td>
<td></td>
</tr>
{% endfor %}
From python anywhere, the error page says "Error code: Unhandled Exception", and the error log through the pythonanywhere dashboard says:
2018-04-24 12:57:23,957: File "/home/FdScGroup/cloudapp/templates/main.html", line 43, in top-level template code
2018-04-24 12:57:23,957: {% for review, product in zip(reviews, productnames) %}
How do I get this to work?
Any help appreciated, thank you.

zip() is a python function, not a function to be executed in the template language of Flask (Jinja2).
So apply zip() in the view and pass the result to the template:
return render_template("main.html", reviews_products=zip(reviews, productnames))
Then apply this trick:
how to iterate over a list of list in jinja
in the template.

Related

How to display database on web framework?

I want to display the content of the database from .db file on web framework using flask module. However, only the row title is able to be displayed on the web framework. The content of the database from the .db file couldn't load out on the web framework. Anyone can help me with this? Thanks.
This is my code:
from flask import Flask, render_template
import sqlite3
app = Flask(__name__)
def connect_db(db):
con = sqlite3.connect(db)
return con.cursor()
#app.route('/')
def index():
db ='mcu_aurix_git.db'
cur = connect_db(db)
cur.execute("SELECT * FROM mcu_aurix")
data = cur.fetchall()
return render_template('flask.html', rows=data)
if __name__ == "__main__":
app.run(debug=True)
flask.html:
<table class="table table-hover">
<thead>
<tr>
<th>project</th>
<th>branch</th>
<th>id</th>
<th>number</th>
<th>subject</th>
<th>owner_name</th>
<th>owner_email</th>
<th>owner_username</th>
<th>url</th>
<th>commitMessage</th>
<th>createdOn</th>
<th>lastUpdated</th>
<th>open</th>
<th>status</th>
<th>current_date</th>
</tr>
</thead>
<tbody>
{% for row in rows %}
<tr>
<td>{{row.project_name}}</td>
<td>{{row.branch_id}}</td>
<td>{{row.id_id}}</td>
<td>{{row.num_number}}</td>
<td>{{row.subject_name}}</td>
<td>{{row.owner_name}}</td>
<td>{{row.owner_email}}</td>
<td>{{row.owner_username}}</td>
<td>{{row.url_name}}</td>
<td>{{row.commitMessage_name}}</td>
<td>{{row.num_createdOn}}</td>
<td>{{row.num_lastUpdated}}</td>
<td>{{row.num_open}}</td>
<td>{{row.status_name}}</td>
<td>{{row.current_date}}</td>
</tr>
{% endfor %}
</tbody>
</table>
Is there anything missing in my code? Hopefully anyone can help me on this. Thanks in advance!
You are not passing rows variable to the html page.
return render_template('flask.html', data=data)
You are only passing data variable.
If you want to use rows inside your html page, you need to use
return render_template('flask.html', rows=data)
Also one more thing,
{{row.project_name}}
You cannot get the value of project_name like this, you need to use index value (col. no. starting from 0). Like,
{{row[0]}}
Instead of manually creating <td> for each col value, you can just use the below tbody code.
<tbody>
{% for row in rows %}
<tr>
{% for col in row %}
<td> {{ col }} </td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
Hope it helps!

Adding table with flask

In my basic web application, when click to "calculate" button there can be two options.
First, there is only one result so I directly show them to the users.
Secondly, there can be more than one result so I need to use table to show my results.
For the first option, I can show my result like below:
<p>Result {{result}}</p>
But I cannot figure out if my "result" parameter is array and how can I show all values of array in the table in my html file.
Any help is appreciated.
You can iterate over your iterable in your template:
Python script:
users = [{"name": "123", "hash": "qwe"},]
#app.route('/index/')
def index_page():
return render_template('index.html', users=users)
Template:
<table>
<thead>
<tr>
<th><span>Hash - Name</span></th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>
<span>{{user['hash']}} - {{user['name']}}</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
See here for more details about iterating over a loop in jinja2 templater.
You can send your result to render in python script:
#app.route('/')
def index():
return render_template('index.html', result='yes')
And in tempalte:
<p>Result {{ result }}</p>
In browser:
<p>Result yes</p>

Flask: delete file from server and database

Hat I'm trying to accomplish is to delete file from server ('static' folder, to be specific).
My jinja template:
<table>
<tr>
{% for file in files_.items %}
<td data-title="title" style="text-align: center">{{ file.title }}</td>
<td data-title="download">Download</td>
{% if current_user.username == "admin" %}
<td data-title="delete" style="text-align: center">Delete</td>
{% endif %}
</tr>
{% endfor %}
</table>
and my function:
#app.route('/upload/<path:filename>/', methods=['GET', 'POST'])
#login_required
def delete(filename):
item = db.session.query(File).get(filename)
os.remove(os.path.join(app.static_folder, item.filename))
db.session.query(File).filter_by(file=filename).delete()
db.session.commit()
return render_template('dashboard.html',delete=delete)
What I'm trying to do is to after clicking on delete in html I want to delete record from database and file from the server. Right now I'm not sure if my approach to call this function is correct, since I've tried to use prints as a primitive log system and there was nothing in the terminal, co I would say function was not called. Also my guess is that I would need to pass filename to it, so Ive tried
{{ delete(filename=file.file) }}
but it returned
UndefinedError: 'delete' is undefined
{{ delete(filename=file.file) }} in template tells python "when rendering template, call function delete()". What you want to do is generate link which, when clicked, will call delete endpoint.
So, use {{ url_for('delete', filename=...) }}

Flask / Python / WTForms validation and dynamically set SelectField choices

I'm trying to create a simple Flask / Python one page web app that uses dynamically created choices for a SelectField.
However, I can't get it to POST using dynamically created choices, and there's also some funny validation behaviour going on (will explain after the code)
I created a minimum failing example here:
from flask import Flask, render_template, flash, redirect
from flask_wtf import Form
from wtforms import IntegerField, SubmitField, SelectField
from wtforms.validators import DataRequired, NumberRange, Optional
# Set up app and config
DEBUG = True
SECRET_KEY = '42721564'
app = Flask(__name__)
app.config.from_object(__name__)
# Main stuff starts here
class SelectFieldForm(Form):
default_field = SelectField('Default Set SelectField', choices=[(i, i) for i in range(0,60,5)], coerce=int)
default_field_2 = SelectField('Default Set SelectField', choices=[(i, i) for i in range(0,60,5)], coerce=int)
dynamic_field = SelectField('Dynamically Set Selectfield', choices=[], validators=[Optional()], coerce=int)
get_default_field_value_difference = SubmitField(label='Get Default Field Difference')
deduct_dynamic_field_value = SubmitField(label='Deduct Dynamic Field Value')
#app.route('/mfe-dynamic-selectfield', methods=['GET', 'POST'])
def failingSelectField():
form = SelectFieldForm()
if form.validate_on_submit():
print("validated")
difference = form.default_field_2.data - form.default_field.data
if form.get_default_field_value_difference.data:
flash( difference )
form.dynamic_field.choices = [(i,i) for i in range(0,difference,5)]
return render_template('mfe-dynamic-selectfield.html', form=form)
if form.deduct_dynamic_field_value.data:
if form.dynamic_field.data:
deducted = difference - form.dynamic_field.data
flash( deducted )
else:
flash( "no dynamic field value chosen")
return render_template('mfe-dynamic-selectfield.html', form=form)
else:
flash( "nope" )
return render_template('mfe-dynamic-selectfield.html', form=form)
if __name__ == '__main__':
app.run()
Bringing up the page works just fine, and immediately flashes "nope", as expected.
Calculating the difference between the default set fields:
-works every time as long they are both set to '0'
-if either field is not set to '0', every other POST fails validation, and the time correctly calculates the difference and dynamically sets the last field.
Trying to POST using the dynamically set field fails every time.
Am I missing something very obvious here?
I'm rendering using this:
{% block content %}
<form action="" method="post" name="mfe-dynamic-selectfield">
{{ form.hidden_tag() }}
<table>
<tr>
<td> Calculated value </td>
<td>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</td>
</tr>
<br>
<tr>
<td>Default SelectField 1</td>
<td>Default SelectField 2</td>
<td>Dynamic Selectfield</td>
</tr>
<br>
<tr>
<td>{{ form.default_field }}</td>
<td>{{ form.default_field_2 }}</td>
<td>{{ form.dynamic_field }}</td>
</tr>
<tr>
<td>{{ form.get_default_field_value_difference }}</td>
<td>{{ form.deduct_dynamic_field_value }}</td>
</tr>
</table>
</form>
{% endblock %}
It's failing every other time because the value of form.dynamic_field is oscillating between 0 and None. The form passes validation only when the value is None.
This is because form.dynamic_field.choices is [] (an empty list) at the time of validation. So any value that comes there is rejected. You probably want to dynamically set the choices before you try the validating; maybe with something like this:
#app.route('/mfe-dynamic-selectfield', methods=['GET', 'POST'])
def failingSelectField():
form = SelectFieldForm()
# Calculate dynamic field choices
try:
difference = form.default_field_2.data - form.default_field.data
form.dynamic_field.choices = [(i,i) for i in range(0,difference,5)]
except TypeError:
pass
if form.validate_on_submit():
# (continue as usual)
Now the form will validate as expected.
Of course, you should probably add some code in front to make sure that the default_fields do have valid choices values (not just any two integers). Another option is to put dynamic_field in a second form. Then you can validate the first form, and use its values to calculate valid choices for the second one.

flask-wtf same form on same page using for loop

I'm brand new to programming. I came up with a project to help me learn and I'm stuck already. I'm using Flask, Flask-SQLAlchemy and Flask-wtf.
I'm trying to create a club attendance system that lists members and checks them off if they are present and logs the amount they paid (either $15 for 1 lesson, or $25 for the week). I have a table that I populate from my database that looks like this:
I want to click on submit to mark the person as present but this ticks the checkbox for everyone in the list and sets the amount paid to the same for everyone.
I have tried lots of things. I have seen similar issues here and people suggesting using FieldList and FormField - I tried this with no luck. Here is my Form code:
class MemberForm(Form):
form_id = HiddenField()
member_id = DecimalField('id')
member_name = StringField('name')
attend_date = StringField('date', default=todays_date())
is_here = BooleanField('here')
has_paid = SelectField('Amount', choices=[(15, '15'), (25, '25')])
submit = SubmitField("Submit")
def __init__(self, *args, **kwargs):
super(MemberForm, self).__init__(*args, **kwargs)
read_only(self.member_name)
My controller code:
#app.route('/', methods=['GET', 'POST'])
def home():
members = Member.query.order_by(Member.name).all()
form = MemberForm()
if request.method == 'POST': # TODO form validation and database stuff
print('got this far')
print(form.data)
return render_template('index.html', title='Tong Long',
today=todays_date(), members=members,
form=form)
and the jinja2 template part:
<table width="483" border="1">
<tbody>
<tr>
<th width="271"><strong>Member</strong></th>
<th width="152"><strong>Grade</strong></th>
<th><strong>Last Seen</strong></th>
<th width="38"><strong>Paid?</strong></th>
<th><strong>Is Here?</strong></th>
<th>Submit</th>
</tr>
{% for member in members %}
<form action="" method="post" name="{{ member.id }}">
<tr>
<td>{{form.member_name(value=member.name)}}</td>
{% for g in member.grade %}
<td>{{ g.grade }}</td>
{% endfor %}
<td>{{ form.attend_date }}</td>
<td>{{ form.has_paid }}</td>
<td>{{form.is_here}}</td>
<td>
{{ form.submit }}
</td>
</tr>
</form>
{% endfor %}
</tbody>
</table>
Viewing the rendered HTML I can see that all the fields have the same id.
I'm starting to think this can't be done with WTForms. Will I need to use javascript perhaps (something I know nothing about). Or manually create the forms rather than using WTF? Any help appreciated!
This is very late, but perhaps it is helpful to somebody.
What calabash is doing, is create one single form and then display it multiple times in the template.
However, to achieve the desired outcome (independend forms with independend submit buttons), multiple forms need to be created within the route function. They can be passed as a list to the template and then looped over. (A simpler solution would be one form with one submit button and dynamically created "lines" for each member. See FieldList...)
Logic:
def home():
members = Member.query.order_by(Member.name).all()
forms = []
for member in members:
form = MemberForm(prefix=member.name)
form.member_name.data = member.name
forms.append(form)
# validation:
for form in forms:
if form.submit.data and form.validate_on_submit():
# do_something here for each form, e.g. write to database
return render_template('index.html', title='Tong Long',
today=todays_date(),
forms=forms,
members=members)
The different forms need to have individual prefixes. They need to be validated individually and it needs to be checked which submit-button was used.
Note: It is perhaps not a good idea to use a form field for the name, as that information is already known from the members database entry and it might not be intended to change it here. A simple text label would make more sense in that case.
The table rows in the template could look like this:
{% for form in forms %}
<form action="" method="post">
{{ form.hidden_tag() }}
<tr>
<td>{{ form.member_name }}</td>
<td>{{ members[loop.index0].grade }}</td>
<td>{{ form.attend_date }}</td>
<td>{{ form.has_paid }}</td>
<td>{{ form.is_here }}</td>
<td>{{ form.submit }}</td>
</tr>
</form>
{% endfor %}

Categories