如何使用Jinja遍历字典中的列表值并动态生成HTML卡片

错误原因 #

直接遍历movies字典时，Jinja默认会遍历字典的键（title、year等字符串类型值），因此你在第二层循环调用movie.items()时，字符串没有对应的items方法，就触发了提示的报错。
同时你的数据结构是所有列表的同索引位置的值对应同一张电影的属性，不需要多层嵌套遍历字典的键值对，直接按索引取值即可实现需求。

正确Jinja写法 #

{% for idx in range(movies.title|length) %}
<div class="col-md-3">
    <div class="card" style="width: 15rem;">
        <img src="{{ movies.poster[idx] }}" class="card-img-top" alt="Movie Poster">
        <div class="card-body">
          <h5 class="card-title">{{ movies.title[idx] }}</h5>
          <p class="card-text">Release year: {{ movies.year[idx] }}</p>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Rating: {{ movies.rating[idx] }} - ({{ movies.votes[idx] }} Votes)</li>
        </ul>
        <div class="card-body">
         <a href="#" class="card-link">More</a>
        </div>
    </div>
</div>
{% endfor %}

可选优化方案 #

如果可以修改后端传入的数据结构，更推荐把原字典预处理为「单电影字典组成的列表」，前端遍历逻辑会更直观：
后端预处理示例（Python）：

movie_list = [
    {
        'title': movies['title'][i],
        'year': movies['year'][i],
        'poster': movies['poster'][i],
        'rating': movies['rating'][i],
        'votes': movies['votes'][i]
    } for i in range(len(movies['title']))
]

此时前端Jinja写法：

{% for movie in movie_list %}
<div class="col-md-3">
    <div class="card" style="width: 15rem;">
        <img src="{{ movie.poster }}" class="card-img-top" alt="Movie Poster">
        <div class="card-body">
          <h5 class="card-title">{{ movie.title }}</h5>
          <p class="card-text">Release year: {{ movie.year }}</p>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Rating: {{ movie.rating }} - ({{ movie.votes }} Votes)</li>
        </ul>
        <div class="card-body">
         <a href="#" class="card-link">More</a>
        </div>
    </div>
</div>
{% endfor %}

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