如何使用Jinja2交替展示包含两个列表的字典内容？

问题场景 #

你有一个来自Flask-SQLite3的字典数据，结构如下：

{
    'titles': [('title-1',), ('title-2',), ('title-3',)],
    'results': [
        (1, 'author-1', 'publisher-1', 'genre-1'),
        (2, 'author-2', 'publisher-2', 'genre-2'),
        (3, 'author-3', 'publisher-3', 'genre-3')
    ]
}

需要在Jinja2模板中交替展示两个列表的内容，最终输出格式要求：

title-1

author-1, publisher-1, genre-1

title-2

author-2, publisher-2, genre-2

title-3

author-3, publisher-3, genre-3

解决方案 #

核心思路是将titles和results两个列表按位置配对，再循环遍历每一对内容。由于两个列表长度一致，使用zip()函数即可完成配对。

步骤1：在Flask视图中预处理数据 #

在视图函数中，将两个列表配对后传入模板（避免在模板中处理复杂逻辑，也兼容更多Jinja2环境）：

@app.route('/your-route')
def your_view():
    # 假设这是从SQLite查询得到的数据
    book_data = {
        'titles': [('title-1',), ('title-2',), ('title-3',)],
        'results': [
            (1, 'author-1', 'publisher-1', 'genre-1'),
            (2, 'author-2', 'publisher-2', 'genre-2'),
            (3, 'author-3', 'publisher-3', 'genre-3')
        ]
    }
    # 配对两个列表，生成(title元组, result元组)的迭代器
    book_data['paired_books'] = zip(book_data['titles'], book_data['results'])
    return render_template('your-template.html', **book_data)

步骤2：在Jinja2模板中循环渲染 #

在模板中遍历配对后的paired_books，注意提取元组内的对应元素：

{% for title_tuple, result_tuple in paired_books %}
{{ title_tuple[0] }}

{{ result_tuple[1] }}, {{ result_tuple[2] }}, {{ result_tuple[3] }}

{% endfor %}

关键说明 #

1. 为什么要取索引？
   • titles中的元素是单元素元组（如('title-1',)），直接输出会显示元组格式，所以需要用title_tuple[0]提取纯文本标题。
   • results中的元组第一个元素是ID，我们需要的是第2、3、4位的作者、出版社、类型，对应索引1、2、3。
2. 若不想在视图中预处理，也可以在Jinja2中直接使用zip（需确保模板环境启用了该函数）：

{% for title_tuple, result_tuple in zip(titles, results) %}
{{ title_tuple[0] }}

{{ result_tuple[1] }}, {{ result_tuple[2] }}, {{ result_tuple[3] }}

{% endfor %}

不过这种方式依赖Jinja2的配置，不如在视图中预处理通用性强。

内容的提问来源于stack exchange，提问作者atahualpa