I have a table in SQLite3 and I need to take nearly all the columns in the table and output them to a web page. For other pages I've used flask, but that has always been a case of passing 3 or 4 single value variables into the template.
I'm guessing it's something like passing either the cursor or, more likely, the rows from the cursor.fetchall() call into the template then a for row in rows loop in the template?
It should be:
<table>
{% for item in items %}
<tr>
<td>{{column1}}</td>
<td>{{column2}}</td>
<td>{{column3}}</td>
<td>{{column4}}</td>
</tr>
{% endfor %}
</table>
You need to follow the below:
[HTML]:
<table>
{% for item in items %}
<tr>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
</td>
{% endfor %}
[python code]:
cursor = db.execute('SELECT column1,column2,column3,column4 FROM tablename')
items = cursor.fetchall()
return render_template('print_items.html', items=items)
Pass your data as some sort of collection, whether that's something like a dictionary in the official tutorial, or something simpler, like a tuple or list.
Yes, in your template, you'll use a {% for item in collection %} -> {% endfor %} loop to render out all of the data from your database.
Example Python method:
#app.route('/print_items')
def print_items():
cursor = db.execute('SELECT column1,column2,column3,column4 FROM tablename')
return render_template('print_items.html', items=cursor.fetchall())
Example template section:
<table>
{% for item in items %}
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
<td>column4</td>
</td>
{% endfor %}
Related
I am using Python FLask to build a webapp and I am trying to push a nested list to a table in HTML.
Python
item = [[22-03-20, $1409.50, 22-03-20], [22-03-20, $60.00, 22-03-20]]
current HTML
{% for rows in item %}
<tr>
<th scope="row">•</th>
{% for cell in rows %}
<td>{{cell}}</td>
{% endfor %}
<td>edit</td>
</tr>
{% endfor %}
The reason for a duplicate of dates in the nested list is because I need to create a special route page to the date itself.
Output I want to achieve
Basically, the edit will redirect to the page to the respective date. As I have multiple expenses of the same date, I can't just use the unique id within the table.
PROBLEM
The current HTML I have is able to output the 3 items I need, date, expense, date but I can't put a URL redirect to the 3rd variable, date. Is there a way to have 2 for loops running parallel to each other, so I could go through 2 lists at the same time? or is there a better way to do what I want to achieve?
Found a way looking through the documentation again, don't need a parallel for loop actually. I changed the nested list to a tuple in a list. Not sure if this is the best way to do it though.
Python
item = [(22-03-20, $1409.50, 22-03-20), (22-03-20, $60.00, 22-03-20)]
HTML
{% for x,y,z in item %}
<tr>
<th scope="row">•</th>
<td>{{x}}</td>
<td>{{y}}</td>
<td>edit</td>
</tr>
{% endfor %}
I think you should use a list of maps.
item = [
{
'date':'22-03-20',
'price':'$1409.50',
'href':'URI'
},
{
'date':'22-03-20',
'price':'$60.00',
'href':'URI'
},
]
so,
{% for row in item %}
<tr>
<th scope="row">•</th>
<td>{{row.date}}</td>
<td>{{row.price}}</td>
<td>
edit
</td>
</tr>
{% endfor %}
In my flask / jinja2 app, I am getting some rows from a database to print in a table. For each row I want to define an identifier for the row from the first item, define the class of the row with the second item and print the rest of the row as table data. I am doing it like this, it works but feels a bit kludgy:
{%- for item in row %}
{% if loop.index==1 %}
<tr id="rec{{item}}"
{% elif loop.index==2 %}
class="{{item}}" >
{% else %}
<td>{{item}}</td>
{% endif %}
{% endfor -%}</tr>
I would like to do something like:
id="rec"+row.pop()
class=row.pop()
then use the variables id and class to define the row and afterwards iterate through what is left of the list. Is this possible in jinja2?
(Using jinja 2.8 as installed on debian 9, but may of course upgrade if that makes things better)
I think you can use slicing in Jinja templates, could you try this, since I can't test it atm:
<tr id="rec{{row[0]}}"
class="{{row[1]}}" >
{% for item in row[2:] %}
<td>{{item}}</td>
{% endfor -%}
</tr>
You could get the first items from the array using their indices and use a slice (e.g. row[2:]) of the array for the for-loop:
<tr id="rec{{row[0]}}" class="{{row[1]}}" >
{%- for item in row[2:] %}
<td>{{item}}</td>
{% endfor -%}</tr>
There is a char field named json_field in Django Model. I am trying to iterate it from the view but it returns only one result as the return statement does. I am trying to figure it out how I can iterate json_field using yield.
the result that Model Object returns like:
id : 1
title : "Some Title"
json_field : [{"key":"value","key2":"value2"},{"key":"value","key2":"value2"}]
created : "Sat Oct 21 2017 14:00:53 GMT+0300 (+03)"
view.py
import json
def MyView(request):
model_query = MyModel.objects.all() or MyModel.objects.filter or exclude...
for item in model_query:
data_item = json.loads(item.json_field)
template = "template.html"
context = {"title":title, "data_item":data_item}
return render(request, template, context)
in template.html
{% for query_item in model_query %}
<table>
<thead>
<tr>
<th>{{ query_item.title }} - {{ query_item.created }}</th>
</tr>
</thead>
<tbody>
<tr>
<th>Some Heading </th>
<th>Some Heading </th>
</tr>
<!-- json data -->
{% for item in data_item %}
<tr>
<th>{{ item.key }}</th>
<td>{{ item.key2|floatformat:2 }}</td>
</tr>
{% endfor %}
<!-- json data -->
</thead>
</table><
{% endfor %}
Any help will be appreciated.
You can prepare dataset for you template.
# Fetch data from db as queryset of dicts
items = list(MyModel.objects.filter().values('title', 'created', 'json_field'))
# Decode json in-place
for item in items:
item['json_field'] = json.loads(item['json_field'])
context = {"title":title, "items": items}
Then interate through items inside your template:
{% for item in items %}
<table>
<thead>
<tr>
<th>{{ item.title }} - {{ item.created }}</th>
</tr>
</thead>
<tbody>
<tr>
<th>Some Heading </th>
<th>Some Heading </th>
</tr>
<!-- json data -->
{% for entry in item.json_field %}
<tr>
<th>{{ entry.key }}</th>
<td>{{ entry.key2|floatformat:2 }}</td>
</tr>
{% endfor %}
<!-- json data -->
</thead>
</table><
{% endfor %}
If you're using PostgreSQL, you can using JSONField. It uses the postgres's jsonb type, which is optimized for keeping a json serializable text.
If not, you still can use django-jsonfield. It almost gives the same functionality, even though some of the cool features of django's JSONField are not available (like this kind of lookups).
If none of these work for you, you can also implement your own JSONField by inheriting from CharField or TextField, and overriding some of the functions. This way, you won't need any of the logics of your field in your views.
Edit:
If you find changing your field hard or don't wanna do it for whatever reason, you can do this in your view:
for item in model_query:
item.loaded_json = json.loads(item.json_field)
then you can use it like a normal field in your template:
{% for query_item in model_query %}
{% for item in query_item.loaded_json %}
<span>{{ item.key }}</spam>
{% endfor %}
{% endfor %}
Hello!
The solution depends on your purposes.
Use comprehensions if you want to construct a list of json arrays:
data_items = [json.loads(item.json_field) for item in model_query]
... or generator of json array:
data_items = (json.loads(item.json_field) for item in model_query)
If you want to have a single array of json objects try this:
data_items = []
for item in model_query:
data_items.extend(json.loads(item.json_field))
Then you can use data_items as a template context.
A little tip: You can utilize JSONField at ORM level if you use PostgreSQL or MySQL. Consider this approach if you plan to make any filter queries on this field. As additional benefit JSON encoding/decoding will be out of box.
Thanks for updating your code!
Now I would restructure the json.load() list of dicts so you can use it. That is better style than mangling in the template.
concatenation is done by:
my_dict = dict()
for d in data_item
my_dict.update( d )
if you want to merge, check this thread:
How to merge two dictionaries in a single expression?
I am using Flask but this probably applies to a lot of similar frameworks.
I construct a pandas Dataframe, e.g.
#app.route('/analysis/<filename>')
def analysis(filename):
x = pd.DataFrame(np.random.randn(20, 5))
return render_template("analysis.html", name=filename, data=x)
The template analysis.html looks like
{% extends "base.html" %}
{% block content %}
<h1>{{name}}</h1>
{{data}}
{% endblock %}
This works but the output looks horrible. It doesn't use linebreaks etc.
I have played with data.to_html() and data.to_string()
What's the easiest way to display a frame?
The following should work:
#app.route('/analysis/<filename>')
def analysis(filename):
x = pd.DataFrame(np.random.randn(20, 5))
return render_template("analysis.html", name=filename, data=x.to_html())
# ^^^^^^^^^
Check the documentation for additional options like CSS styling.
Additionally, you need to adjust your template like so:
{% extends "base.html" %}
{% block content %}
<h1>{{name}}</h1>
{{data | safe}}
{% endblock %}
in order to tell Jinja you're passing in markup. Thanks to #SeanVieira for the tip.
Ok, I have managed to get some very nice results by now combining the hints I got here. In the actual Python viewer I use
#app.route('/analysis/<filename>')
def analysis(filename):
x = pd.DataFrame(np.random.randn(20, 5))
return render_template("analysis.html", name=filename, data=x)
e.g. I send the complete dataframe to the html template. My html template is based on bootstrap. Hence I can simply write
{% extends "base.html" %}
{% block content %}
<h1>{{name}}</h1>
{{ data.to_html(classes="table table-striped") | safe}}
{% endblock %}
There are numerous other options with bootstrap, check out here:
http://getbootstrap.com/css/#tables
Base.html is essentially copied from here
http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-xii-facelift
The next question is obviously how to plot such a frame. Anyone any experience with Bokeh?
Thank you both to Matt and Sean.
thomas
Iterating over the rows of a df
If you need to have the df in a format that can iterate over the rows in your html, then use to_dict(orient='records'), which produces a dict in a format:
‘records’ : list like [{column -> value}, … , {column -> value}]
That way you can use your own way of displaying the data in your html.
The sample code would now look like this:
Python code using flask
#app.route('/analysis/<filename>')
def analysis(filename):
x = pd.DataFrame(np.random.randn(20, 5))
return render_template("analysis.html", name=filename, data=x.to_dict(orient='records'))
HTML code with jinja
{% extends "base.html" %}
{% block content %}
<table class="table">
<thead>
<tr>
<th scope="col">Column name 1</th>
<th scope="col">Column name 2</th>
<th scope="col">Column name 3</th>
</tr>
</thead>
<tbody>
{% for row in data %}
<tr>
<td>{{row['Column name 1']}}</td>
<td>{{row['Column name 2']}}</td>
<td>{{row['Column name 2']}}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
You can use enaml-web to display and interact with pandas dataframes.
A few examples:
With filtering - https://github.com/frmdstryr/smd-search
Simple viewer - https://github.com/codelv/enaml-web/tree/master/examples/dataframe_viewer
Note: Interaction (sorting, filtering, etc...) requires a server with websocket support.
In Django, I am trying to generate a table. The first column is a timestamp. The next 5 columns need to be filled with my data.
However, my data table has 5 entries for each related timestamp. How can I put this data into my table with the correct headers?
The data entries are all seperate objects within Django..
The table has multiple rows with each their own timestamp, and their 5 corresponding data entries.
Is it possible to make this in the template layer, or view layer?
<table class="table table-hover">
<tr>
<th>date</th>
{% for sensor in sensors %}
<th>{{ sensor }}</th>
{% endfor %}
<th>Link</th>
</tr>
{% for stamp in stamps %}
<tr>
<td>{{ stamp.stamp|date:"D d N H:i" }}</td>
<td>Bekijk Detail</td>
</tr>
{% endfor %}
</table>
Instead of handling all this really complicated data in Django's template layer, this ought to be solved using the viewlayer.
First you create a new array, and seed it's table headers
table = ["header 1", "header 2"]
For each individual row you will add your data. The data I requested as a single datetime, followed by measurements. This equated to the following code
for x in range(0, len(timestamps)):
table.append(timestamp)
for datapoint in data:
table.append(datapoint)
You can then iterate through it in django's template layer.
<table>
{% for row in table %}
<tr>
{% for item in row %}
<td>{{item}}</td>
{% endfor %}
</tr>
{% endfor %}
</table>
You can add some custom if/else statements for headers and that kind of thing.