如何在Jinja2模板中遍历Flask传递的JSON对象获取列表内字典数据

错误根源说明 #

1. Jinja2模板的变量解析规则要求：所有变量访问、运算表达式必须完整放在{{ }}输出标签内部，或者控制语句{% %}内部，你写的{{data}}['data'][0]['video_id']只把data放在了变量标签里，后面的下标部分Jinja2会视为普通HTML文本，不会作为变量逻辑解析，写法错误才会触发报错。
2. 从你直接输出{{ data }}的返回结构可以确认，你传递到模板的data变量本身是一个顶层字典，其内部data键对应你要遍历的字典列表。

正确实现方式 #

单个元素访问

把完整的访问逻辑放在同一个{{ }}标签内，两种写法均可：

• 点号访问写法（Jinja2特有的简化语法，列表索引也可以用点号加数字）：

{{ data.data.0.video_id }}

• 标准下标写法：

{{ data['data'][0]['video_id'] }}

遍历所有元素

使用Jinja2的for循环控制块（控制语句不需要加{{ }}，直接写变量名即可）：

<!-- 示例：输出为列表 -->
<ul>
{% for item in data.data %}
  <li>视频ID：{{ item.video_id }}，开始时间：{{ item.start_time }}</li>
{% endfor %}
</ul>

额外优化建议 #

你当前的json.dumps + json.loads操作完全多余，没有任何实际作用，你可以直接在Flask视图里传递原始数据，简化代码：

return render_template("index.html", data={"data": dics})

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