带有'if'条件的嵌套for循环在带有html的Jinja2模板中答案

【问题标题】：Nested for loop with 'if' condition in Jinja2 template with html带有'if'条件的嵌套for循环在带有html的Jinja2模板中
【发布时间】：2021-09-26 00:58:13
【问题描述】：

我正在尝试在 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)]

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

        {% 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）创建一个“图表行项目”，并且列表（图表 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 中实现。

【问题讨论】：

标签： python html css jinja2

【解决方案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 %}

【讨论】：