I'm trying to display me df in a table to my web app (without using .tohtml because I need a dynamic table).
It seems that I can't use the key/column variable from my loop :
<table id='bdd_table'>
<thead>
<tr>
{% for header in BDD_Data %}
<th> {{header}} </th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for key in BDD_Data_size %}
<tr>
{% for column in BDD_Data %}
<td> {{BDD_Data[column][key]}} </td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
My error:
I think I've any problems with my data because if I write {{column}} / {{key}} instead of {{BDD_Data[column][key]}} it displays all the values from my dataframe.
The trick was to use mydataframe.values :
<table id='bdd_table'>
<thead>
<tr>
{% for header in BDD_Data %}
<th> {{header}} </th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for value in BDD_Data.values %}
<tr>
{% for cell in value %}
<td> {{cell}} </td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
Related
What I am trying to do is to populate a html table with the same numbers of rows as entries in my dictionary.
I am passing my dictionary items as a context variable to the html.
I can show my dictionary items as follows:
{% for key,value in top_items.items %}
<ul>{{ key }}</ul>
{% endfor %}
But when I try an stick it into a table to create table rows, like below, it does not work. It seems to put them all in one row. Instead of making a new row for each item.
<table class="u-half-width">
<thead>
<tr>
<th>Column</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
{% for key,value in top_items.items %}
<tr>{{ key }}</tr>
{% endfor %}
</tr>
</tbody>
</table>
Your HTML is invalid; you can't nest a <tr> inside another <tr>, and you don't have any <td>/<th> elements.
Try:
<tbody>
{% for key,value in top_items.items %}
<tr>
<th scope="row">{{ key }}</th>
<td>{{ value }}</td>
</tr>
{% endfor %}
</tbody>
I'm using symfony and html2pdf bundle to generate a pdf file so here's the code that I used to display a table in the pdf file:
<table class="border" width="100%" align="center">
<thead>
<tr>
<th>Kilometrage</th>
<th>Liste des Interventions</th>
</tr>
</thead>
<tbody>
<tr>
{% if voitures.kilometrage-voitures.kilometragederniervidange<20000 and voitures.kilometrage-voitures.kilometragederniervidange>=10000%}
{% for intervention1 in interventions1 %}
<td>{{ voitures.kilometragederniervidange+10000 }}</td>
<td>***{{ intervention1.interventions }}</td>
{% endfor %}{% endif %}
</tr>
</tbody>
</table>
and here's what I get as a result:
and what I want to do is to show each line separately. What should I do exactly? ?
You have probably misplaced the for cycle, try this:
<table class="border" width="100%" align="center">
<thead>
<tr>
<th>Kilometrage</th>
<th>Liste des Interventions</th>
</tr>
</thead>
<tbody>
{% if voitures.kilometrage-voitures.kilometragederniervidange<20000 and voitures.kilometrage-voitures.kilometragederniervidange>=10000%}
{% for intervention1 in interventions1 %}
<tr>
<td>{{ voitures.kilometragederniervidange+10000 }}</td>
<td>***{{ intervention1.interventions }}</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
This will insert new table row for every record / run of the for cycle.
Okay, I'll try to make it short.
I got an XML file from Musicbrainz. Then I converted it to CSV and replaced the .'s with _'s to make it work with Liquid.
I put music.csv in _data and call it with:
{% include music.html %}
_includes/music.html looks (in part) like:
<table border="1" style="width:100%">
<tr>
<td>Artist</td>
<td>Track title</td>
</tr>
<tr>
{% if member.release_medium-list_medium_track-list_track_0_recording_artist-credit_name-credit_artist_name %}
<td>{{ member.release_medium-list_medium_track-list_track_0_recording_artist-credit_name-credit_artist_name }}</td>
{% endif %}
{% if member.release_medium-list_medium_track-list_track_0_recording_title %}
<td>{{ member.release_medium-list_medium_track-list_track_0_recording_title }}</td>
{% endif %}
</tr>
<tr>
{% if member.release_medium-list_medium_track-list_track_1_recording_artist-credit_name-credit_artist_name %}
<td>{{ member.release_medium-list_medium_track-list_track_1_recording_artist-credit_name-credit_artist_name }}</td>
{% endif %}
{% if member.release_medium-list_medium_track-list_track_1_recording_title %}
<td>{{ member.release_medium-list_medium_track-list_track_1_recording_title }}</td>
{% endif %}
</tr>
<tr>
{% if member.release_medium-list_medium_track-list_track_2_recording_artist-credit_name-credit_artist_name %}
<td>{{ member.release_medium-list_medium_track-list_track_2_recording_artist-credit_name-credit_artist_name }}</td>
{% endif %}
{% if member.release_medium-list_medium_track-list_track_2_recording_title %}
<td>{{ member.release_medium-list_medium_track-list_track_2_recording_title }}</td>
{% endif %}
</tr>
Now, clearly, this is not the best way to do it. What I'm after is something that:
Looks for the relevant data
If the data is there, creates the cells and fills them out.
I'm pretty sure this can be done with Liquid, but I have no idea how. Can someone here help?
EDIT: Turns out I forgot the CSV file -- here it is, on Pastebin.
EDIT 2: This Cheat Sheet might be of help!
The format of a CSV file inherently does not support repeated sections so I think it would be a bad fit for the variable length data format you are trying to use. I feel JSON is more appropriate for this use case as it can handle the structure of the source data you are trying to work with.
As a quick example I put the XML file you supplied through this converter to create a JSON version of the output. This was saved as "_data/music.json".
This liquid code was then used to parse this:
{% for item in site.data.music %}
<h2> {{ item[1].release.title }}</h2>
{% for medium in item[1].release.medium-list %}
<h3> {{ medium[1].format }} </h3>
<table border="1" style="width:100%">
<tr>
<td>Artist</td>
<td>Track title</td>
</tr>
{% for track in medium[1].track-list.track %}
<tr>
<td>{{ track.recording.artist-credit.name-credit.artist.name }}</td>
<td>{{ track.recording.title }}</td>
</tr>
{% endfor %}
</table>
{% endfor %}
{% endfor %}
This produces HTML like this (trimmed):
<h2> The Quatermass Film Music Collection</h2>
<h3> CD </h3>
<table border="1" style="width:100%">
<tr>
<td>Artist</td>
<td>Track title</td>
</tr>
<tr>
<td>Tristram Cary</td>
<td>Quatermass and the Pit: Opening Credits</td>
</tr>
<tr>
<td>Tristram Cary</td>
<td>Quatermass and the Pit: Bones</td>
</tr>
</table>
Based on this you should be able to produce the format you ultimately want.
This is a simple way to iterate over a csv file.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
{% for column in include.datafile[0] %}
<th>{{ column[0] }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for spec in include.datafile %}
<tr>
{% for value in spec %}
<td>{{ value[1] }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
I am not very good with table in html, so this question might be very simple to answer.
I pass the list of list {{ attributes }} to the template and I want to create a table with 2 rows and many columns.
TEMPLATE:
<div id="table">
<table border=0>
{% for attr in attributes %}
<td>
<th>{{ attr.0 }}</th>
{{ attr.1 }}
</td>
{% endfor %}
</table>
</div>
I want the {{ attr.0 }} to be the header and displayed on a single row and the {{ attr.1 }} displayed on the second row.
How about
<div id="table">
<table border=0>
<thead>
<tr>
{% for attr_head in attributes.keys %}
<th>{{ attr_head }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
<tr>
{% for attr in attributes.values %}
<td>{{ attr }}</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
Just loop through the dict's keys and rendering them as th elements in the table header and then loop through the values, rendering them inside the tbody. th and td are columns in the table and tr are rows.
Also, you should read up on html tables, they aren't that hard
You could just loop twice, once for headers once for content?
<div id="table">
<table border=0>
<tr>
{% for attr in attributes %}
<th>{{ attr.0 }}</th>
{% endfor %}
</tr>
<tr>
{% for attr in attributes %}
<td>{{ attr.1 }}</td>
{% endfor %}
</tr>
</table>
</div>
I'm creating an e-commerce website and I wanted to build a page where I could view a list of all the orders created.
If the order contains just 1 type of item, the format works correctly, but i can't think of a way to construct the table when there are multiple types of items ordered.
This is how it looks like when there are 2 items ordered (last entry):
I want the "Queso Burrito" to be right under "steak and egg burrito" for #18.
This is my code:
<table>
<tr>
<td>#</td>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Order</td>
<td>Order Quantity</td>
<td>Delivered</td>
</tr>
{% for ord in orders %}
<tr>
<td>{{ord.pk}}</td>
<td>{{ord.user.first_name}}</td>
<td>{{ord.user.email}}</td>
<td>{{ord.user.get_profile.phone}}</td>
{% for food in ord.orderitem_set.all %}
<td>{{food.name}}</td>
<td>{{food.quantity}}</td>
{% endfor %}
<td>x</td>
</tr>
{% endfor %}
</table>
With multiple items, you typically see tables with order data repeated for each line item.
{% for order in orders %}
{% for orderitem in order.items %}
<td>{{order.id}}</td><td>...</td>
{% endfor %}
{% endfor %}
If you want exactly the formatting you described, you could check if the inner loop is past its first item and hide the fields you don't want repeated.
<table>
{% for ord in orders %}
{% for item in ord.orderitem_set.all %}
<tr>
{% if forloop.counter == 1 %}
<td>{{ord.pk}}</td>
<td>{{ord.user.first_name}}</td>
<td>{{ord.user.email}}</td>
<td>{{ord.user.get_profile.phone}}</td>
{% else %}
<td colspan="4"></td>
{% endif %}
<td>{{item.name}}</td>
<td>{{item.quantity}}</td>
<td>{% if forloop.counter == 1 %}x{% endif %}</td>
</tr>
{% endfor %}
{% endfor %}
</table>