How to create dynamic header with vertical table in Django template - python

I have data:
data =
[
{
"name":"bolb",
"category_name":"Electronics",
"size":"34",
"price":"890",
"currency_name":"Us",
},
{
"name":"bolb",
"category_name":"Electronics",
"size":"2",
"price":"9099",
"currency_name":"Us",
}
]
I need to show this data into template like as below.
<table>
<tbody>
<tr>
<td>Category Compare</td>
<td>bolb</td>
<td>bolb asun</td>
</tr>
<tr>
<td>price </td>
<td>890</td>
<td>9099</td>
</tr>
<tr>
<td>category_name</td>
<td>Electronics</td>
<td>Electronics</td>
</tr>
<tr>
<td>currency_name</td>
<td>Us</td>
<td>Us</td>
</tr>
</tbody>
</table>
My desire output table vertically with dynamic. I have added image also for clarification. Can i change my variable data or i can do it using for loop.Please suggest best idea or code will be appreciate.
This is my output image:

you may do something like this:
<table>
<tbody>
<tr>
<td>Category Compare</td>
{% for i in data %}
<td>{{i.name}}</td>
{% endfor %}
</tr>
<tr>
<td>price </td>
{% for i in data %}
<td>{{i.price}}</td>
{% endfor %}
</tr>
<tr>
<td>category_name</td>
{% for i in data %}
<td>{{i.category_name}}</td>
{% endfor %}
</tr>
<tr>
<td>currency_name</td>
{% for i in data %}
<td>{{i.currency_name}}</td>
{% endfor %}
</tr>
</tbody>
</table>

Related

Using while loop with counter in django template

I need to put a counter in while loop in template. So I did:
<tbody>
{% with count=1 %}
{% while count <={{orders_count}}: %}
{% for order in orders %}
<tr>
<td style="width:5%;"></td>
<td>{{count}}</td>
<td>{{order.name}}</td>
</tr>
{% count+=1 %}
{% endfor %}
{% endwhile %}
{% endwith %}
</tbody>
But finaly I have the following error:
Invalid block tag on line 216: 'while', expected 'endwith'. Did you forget to register or load this tag?
You do not need a while loop here, you can simply make use of the |slice template filter [Django-doc]:
<tbody>
{% for order in orders|slice:orders_count %}
<tr>
<td style="width:5%;"></td>
<td>{{ forloop.counter }}</td>
<td>{{ order.name }}</td>
</tr>
{% endfor %}
</tbody>
But slicing, etc. does not really belong in the template. You normally do that in the view.
You can try this :
<tbody>
{% for order in orders %}
<tr>
<td style="width:5%;"></td>
<td>{{forloop.counter}}</td>
<td>{{order.name}}</td>
</tr>
{% endfor %}
</tbody>

non repeating th for each table row

is there a way to remove the repeated th for each row?
I only want it to show at the top of the table, and not repeat for each row that I import from psql. I've searched and tried several options, but none seem to work for me. I'm using Flask and SQLAlchemy to connect to a postgre table. (the table is called injection)
This is part of my code:
{% block contents %}
<h1>Injection Data</h1>
{% for inject in injection %}
<table>
<tr>
<th>Timestamp</th>
<th>Cage Identifier</th>
<th>Ear Notch Number</th>
<th>Age</th>
<th>Date of Birth</th>
<th>Strain</th>
</tr>
<tr>
<td>{{inject.Timestamp}}</td>
<td>{{inject.Cage_Identifier}}</td>
<td>{{inject.Ear_Notch_Number}}</td>
<td>{{inject.Age}}</td>
<td>{{inject.DOB}}</td>
<td>{{inject.Strain}}</td>
</tr>
</table>
{% endfor %}
{% endblock contents %}
However, the column headers th will repeat for each row of data that is imported from the postgre table.
Your <th> and <table> must not be in loop only <tr><td></td></tr> needs to be in loop,
like below.
{% block contents %}
<h1>Injection Data</h1>
<table>
<tr>
<th>Timestamp</th>
<th>Cage Identifier</th>
<th>Ear Notch Number</th>
<th>Age</th>
<th>Date of Birth</th>
<th>Strain</th>
</tr>
{% for inject in injection %}
<tr>
<td>{{inject.Timestamp}}</td>
<td>{{inject.Cage_Identifier}}</td>
<td>{{inject.Ear_Notch_Number}}</td>
<td>{{inject.Age}}</td>
<td>{{inject.DOB}}</td>
<td>{{inject.Strain}}</td>
</tr>
{% endfor %}
</table>
{% endblock contents %}

Django - Looping through a dictionary using a second variable in template

I'm trying my best not to repeat myself in my code but I'm encountering a problem looping through a dictionary by key in my template.
I have two dicts:
exampledict={'firstkey':firstval, 'secondkey':secondval}
keys=['firstkey', 'secondkey']
keydict={'keys':keys}
In my template I want to loop over the exampledict using the keydict:
<tr>
{% for val in keydict %}
<td>{{ exampledict.val }}</td>
{% endfor %}
</tr>
I've noticed this kind of combination of variables doesn't work at all, I tried by using:
{'firstkey':'firstkey'}
And sending that through to the template and later trying
{{ exampledict.firstkey }}
Is there a better way to accomplish what I'm trying to do here?
Edit 1:
Manually going through each key as:
<td> {{ exampledict.firstkey }} </td> <td> {{ exampledict.secondkey }} </td>
Where firstkey and secondkey is the actual dictkey for exampledict works, although it makes for a lot of repetition.
Edit 2:
views.py
def tabletest(request):
exampledict={'firstkey':'firstval', 'secondkey': 'secondval'}
keydict={
'keys':['firstkey', 'secondkey']
}
return render(request, 'MinaFakturor/tabletest.html', {'exampledict':exampledict, 'keydict':keydict})
template
<table>
<thead>
<tr>
{% for val in keydict.keys %}
<th>{{ val }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
<tr>
{% for val in keydict.keys %}
<td>{{ exampledict.val }}</td>
{% endfor %}
</tr>
<tr>
<td>{{ exampledict.firstkey }}</td>
</tr>
</tbody>
</table>
Which produces this result:
If I remove the exampledict.firstkey term, nothing is produced in the table body.

Jinja lookup key in for loop

I pass 2 groups of data from my view.py to my html file.
But only one group of data is shown in the webpage.
html:
<h3>Database: A</h3>
<table>
<tr>
<th>A</th>
<th>Counts A-1</th>
<th>Counts A-2</th>
<th>Value</th>
</tr>
{% load lookup %}
{% for i in Amatch %}
<tr>
<th> {{ Amatch|lookup:forloop.counter0 }} </th>
<td> {{ Amatchtotal|lookup:forloop.counter0 }} </td>
<td> {{ AmatchCount|lookup:forloop.counter0 }} </td>
<td> {{ Avalue|lookup:forloop.counter0 }} </td>
</tr>
{% endfor %}
</table>
<h3>Database: B</h3>
<table>
<tr>
<th>B</th>
<th>Counts B-1</th>
<th>Counts B-2</th>
<th>Value</th>
</tr>
{% load lookup %}
{% for i in Bmatch %}
<tr>
<th> {{ Bmatch|lookup:forloop.counter0 }} </th>
<td> {{ Bmatchtotal|lookup:forloop.counter0 }} </td>
<td> {{ BmatchCount|lookup:forloop.counter0 }} </td>
<td> {{ Bvalue|lookup:forloop.counter0 }} </td>
</tr>
{% endfor %}
</table>
view.py
return render(request, 'analysis/result.html', {'Amatch':Amatch, 'Amatchtotal':Amatchtotal, 'AmatchCount':AmatchCount, 'A_re':A_re, 'Avalue':Avalue, 'Bmatch':Bmatch, 'Bmatchtotal':Bmatchtotal, 'BmatchCount':BmatchCount, 'B_re':B_re, 'Bvalue':Bvalue,})
Two groups of data are supposed to be shown on the page as I expected.
However, only the data from group B is shown on the page.
I tried to switch the order of group A and group B, but still only group B is shown.
I'm pretty sure data are passed successfully by checking them in terminal.
Are there anything wrong with my code?

mustache, babel and gettext

I am using Flask, jinja together with Mustachjs.
In order to get the job done I am using the {% raw %} tag.
Now, it is a multi-languages application and I use Babel.
How can I do :
{% raw %}
<script id="details" type="text/template">
<table class="table" >
<thead>
<tr>
<th>**{{gettext('col1')}}</th>
<th>**{{gettext('col2')}}</th>
<th>**{{gettext('col6')}}</th>
</tr>
</thead>
<tbody>
{{#skyrsla}}
<tr>
<td> {{index}}</td>
<td> {{nafn}}</td>
<td> {{mean_growth_index}}</td>
</tr>
{{/skyrsla}}
</tbody>
</table>
</script>
{% endraw %}
Since it is between raw tags, the Babel extension does not detect {{gettext('col1')}
Is there a way to alter the configuration of Babel.
My actual configuration looks like :
[python: **.py]
[jinja2: **/templates/**.html]
extensions=jinja2.ext.autoescape,jinja2.ext.with_
Simply end your raw blocks between calls to gettext:
{% raw %}
<script id="details" type="text/template">
<table class="table" >
<thead>
<tr>
<th>**{% endraw %}{{gettext('col1')}}{% raw %}</th>
<th>**{% endraw %}{{gettext('col2')}}{% raw %}</th>
<th>**{% endraw %}{{gettext('col6')}}{% raw %}</th>
</tr>
</thead>
<tbody>
{{#skyrsla}}
<tr>
<td> {{index}}</td>
<td> {{nafn}}</td>
<td> {{mean_growth_index}}</td>
</tr>
{{/skyrsla}}
</tbody>
</table>
</script>
{% endraw %}

Categories