在具有 html 的 Jinja2 模板中使用 'if' 条件嵌套 for 循环

Question

我正在尝试在 HTML 中编写一个 Jinja 模板，它是这样的：

从 Python 脚本传递的列表如下：

    return render_template('index.html',
            table2_data = table2_data,
    )

table2_data如下图：

[(1, 'T1', 'ST3', 'item1', datetime.date(2021, 2, 18), datetime.date(2021, 4, 23), '21.2', False, 'Approved', 'Windows', '2021', 2, 4),         
(2, 'T3', 'ST3', 'item2', datetime.date(2020, 12, 25), datetime.date(2021, 2, 25), '21.1', False, 'Draft', 'Windows', '2021', 12, 2), 
(3, 'T2', 'ST5', 'item3', datetime.date(2020, 12, 25), datetime.date(2021, 2, 25), '21.1', False, 'Approved', 'Linux', '2021', 12, 2), 
(4, 'T5', 'ST7', 'item4', datetime.date(2021, 11, 22), datetime.date(2022, 1, 22), '21.6', False, 'Approved', 'Windows', '2021', 11, 1), 
(5, 'T1', 'ST22', 'item5', datetime.date(2021, 7, 28), datetime.date(2021, 10, 28), '21.5', False, 'Approved', 'Linux', '2021', 7, 10), 
(6, 'T2', 'ST21', 'item6', datetime.date(2021, 4, 21), datetime.date(2021, 7, 21), '21.3', False, 'Approved', 'Windows', '2021', 4, 7), 
(7, 'T3', 'ST6', 'item7', datetime.date(2021, 4, 21), datetime.date(2021, 7, 21), '21.3', False, 'Approved', 'Linux', '2021', 4, 7), 
(8, 'T6', 'ST8', 'item8', datetime.date(2021, 7, 28), datetime.date(2021, 10, 28), '21.5', False, 'Rejected', 'Windows', '2021', 7, 10)]

HTML Jinja 中需要解析此列表的代码如下：

        {% for items in table2_data %}
        <div class="chart-row">
          <div class="chart-row-item" style="background-color:#ee4035;" id="{{ items[2] }}">{{ items[2] }}</div>
            <ul class="chart-row-bars" style="background-color:#cdddd2;">
          {% for subtask in table2_data %}
            <li class="chart-li-dynamic" style="--columlength: {{subtask[11]}}/{{subtask[12]}};">{{ subtask[3] }}</li>
            {% endfor %}
            </ul>
        </div>
        {% endfor %}
      </div>

我的目标是有 2 个循环：

为总行数（样本中为8）
内部循环应该只运行项目列表中位于列表第 3 个索引处的项目数。因此，例如 'ST3' 有两个项目 'item1' & 'item2'，因此内部循环应该只执行两次。
列表中显示的数据也来自项目列表。因此，根据示例数据，期望为每个子任务（示例 ST3）创建一个 'chart-row-item'，列表（chart-li-dynamic）应显示每个项目（ST3 的示例，列表为 'item1' & 'item2').

我正在尝试这样的事情。我正在尝试创建一个动态列表，但我不确定这是否可行。

<!--        {% for items in table2_data %}-->
<!--            {% set myList = [item for item in table2_data-->
<!--                       if item[1] == 'T1'] %}-->
<!--            {% for sub_items in myList %}-->
<!--        <div class="chart-row">-->
<!--          <div class="chart-row-item" style="background-color:#ee4035;" id="{{ myList[2] }}">{{ myList[2] }}</div>-->
<!--            <ul class="chart-row-bars" style="background-color:#cdddd2;">-->
<!--          {% for subtask in myList %}-->
<!--            <li class="chart-li-dynamic" style="&#45;&#45;columlength: {{subtask[11]}}/{{subtask[12]}};">{{ subtask[3] }}</li>-->
<!--            {% endfor %}-->
<!--                {% endfor %}-->
<!--            </ul>-->
<!--        </div>-->
<!--        {% endfor %}-->
<!--      </div>-->

就像在Python中一样，我可以像这样简单地做到这一点：

    Mytask1_suptask = [item for item in table2_data
                       if item[1] == 'T1']

有没有办法在 Jinja 中实现这个。

Answer 1

我猜

{% for item in table2_data %}
    {% if item[1] == 'T1' %}
        {{ item }}
    {% endif %}
{% endfor %}

（为清楚起见，我在下面的 OP 问题中包含了我能够找到的问题）

就像在Python中一样，我可以像这样简单地做到这一点：

Mytask1_suptask = [item for item in table2_data
                   if item[1] == 'T1']

有没有办法在 Jinja 中实现这个。

你提到了嵌套循环，所以也许这就是你想要的

{% for item1 in table2_data %}
  <div>
    {% for item2 in table2_data %}
      {% if item1[1] == item2[1] %}
          {{ item }}
      {% endif %}
    {% endfor %} 
  </div>
{% endfor %}

在具有 html 的 Jinja2 模板中使用 'if' 条件嵌套 for 循环

Nested for loop with 'if' condition in Jinja2 template with html

html

css

python

jinja2