How to print array with jekyll and liquid - jekyll

I have a json document with some data
{"teams":[{"team":"Team A","evolution":[1,2]},{"team":"Team B","evolution":[3,4]}]}
I try to print it to my view with liquid
{% for team in teams %}
<tr>
<td>{{team.team}}</td>
<td>{{team.evolution}}</td>
</tr>
{% endfor%}
The html result is
<tr>
<td>Team A</td>
<td>12</td>
</tr>
<tr>
<td>Team B</td>
<td>34</td>
</tr>
But what I would like to print is the raw array for the second <td>
<tr>
<td>Team A</td>
<td>[1,2]</td>
</tr>
<tr>
<td>Team B</td>
<td>[3,4]</td>
</tr>

Presuming that you get your datas from a _data/teams.json file, this works :
{% assign teams = site.data.teams.teams %}
<table>
{% for team in teams %}
<tr>
<td>{{team.team}}</td>
<td>{{team.evolution | join: "," | prepend: "[" | append: "]"}}</td>
</tr>
{% endfor%}
</table>

Related

Showing context variable within HTML table

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>

Get front matter data of specific pages into table in Jekyll

I want to get some information from the front matter ({{ page.title }} and {{ page.status }}) for some of my site pages into a table on my index page.
How should I do this?
<table>
<tr>
<td>Page title</td> <td>Page status</td>
</tr>
<tr>
<td>{{ page-name-1.title }}</td><td>{{ page-status-1.status }}</td>
</tr>
<tr>
<td>{{ page-name-2.title }}</td><td>{{ page-status-2.status }}</td>
</tr>
</table>
You can get a specific page from the site.pages collection with the Liquid filter where of Jekyll.
Given I have a page foo.md with this front matter:
---
title: foo
status: bar
---
Then this:
<table>
<tr>
<td>Page title</td>
<td>Page status</td>
</tr>
{% assign page_info = site.pages | where: 'name', 'foo.md' %}
<tr>
<td>{{ page_info[0].title }}</td>
<td>{{ page_info[0].status }}</td>
</tr>
</table>
Will render as
<table>
<tr>
<td>Page title</td>
<td>Page status</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</table>
Just repeat it for any page that have an interest for you:
{% assign pages_info = 'foo.md,index.md' | split: ',' %}
<table>
<tr>
<td>Page title</td>
<td>Page status</td>
</tr>
{% for page_name in pages_info %}
{% assign page_info = site.pages | where: 'name', page_name %}
<tr>
<td>{{ page_info[0].title }}</td>
<td>{{ page_info[0].status }}</td>
</tr>
{% endfor %}
</table>

Adding Message for empty row in bootstrap table

I'm working on a Django project but am relatively new to bootstrap and css.
I have a table with books inventory and its looking fine until there are records in them. But when there are no records, I want to display a placeholder "No books added yet."
I've tried multiple ways but I'm unable to do so.
This is my html file:
<table class="table table-hover table-bordered">
<thead class="thead-light">
<tr>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">Genre</th>
<th scope="col">Available</th>
<th scope="col">Add Date</th>
</tr>
</thead>
<tbody>
{% if books.count > 0 %}
{% for row in books %}
<tr>
<td>{{row.title}}</td>
<td>{{row.author}}</td>
<td>{{row.genre}}</td>
<td>{% if row.available %}Yes{% else %}No{% endif %}</td>
<td>{{row.date}}</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td>No Books added yet !</td>
</tr>
{% endif %}
</tbody>
</table>
Doing so, the placeholder is just comimg on the first cell:
How to edit this so this cell shows as a complete row?

Displaying table data in python flask

I am listing down the data coming from the database in a table. But it is not aligning as a table.
what I want to display in the web page is,
Name john mark
Faculty cs
University xxx
But what I get in the web page is,
Name john mark
Faculty cs
University xxx
In my .html I have,
{% for item in data %}
<tr>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
</tr>
<br>
{% endfor %}
Please help me with this as I am new to python flask.
This is how valid table HTML should look.
You have not wrapped tr with <table> element.
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
So your code should look like this.
<table>
{% for item in data %}
<tr>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
</tr>
{% endfor %}
</table>
Try this html
<table>
<tbody>
{% for item in data %}
<tr>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
</tr>
{% endfor %}
</tbody>
</table>

Display a table using for twig

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.