Flask Jinja2中正确渲染JSON对象内容的技术咨询

看起来你遇到的核心问题有两个：一是对传递的对象结构理解有误，二是可能没把JSON字符串正确解析为Python对象，导致模板渲染出现异常。咱们一步步来解决：

首先确认后端的对象处理是否正确 #

你传递的items本质是一个包含单个字典的Python列表（如果已经解析了JSON的话），但如果后端直接把JSON字符串传进模板，就会出现循环时每个字符拆分的问题。所以第一步要确保后端把JSON转成了Python的列表/字典：

import json

# 假设你的原始数据是JSON字符串
json_raw = '[ { "name": "John", "lastname": "Smith", "age": 22, "likes": [ {"fruits": ["bananas", "oranges"] }, {"sweets": ["chocolate"] } ] } ]'
# 关键：把JSON字符串解析为Python对象（列表+字典）
items = json.loads(json_raw)

# 再传递给模板
return render_template("report.html", items=items)

如果你的items本来就是从数据库或其他地方拿到的Python对象，这一步可以跳过，但一定要确认它是列表类型，不是字符串。

模板中正确调用属性 #

因为items是列表，不能直接用items['name']（列表只能用索引，不能用字符串键），所以要根据你的场景选择写法：

场景1：只有单个对象（像你例子里的情况） #

直接取列表的第一个元素，再访问它的属性：

<div id="name">{{ items[0]['name'] }}</div>
<div id="lastname">{{ items[0]['lastname'] }}</div>
<div id="age">{{ items[0]['age'] }}</div>

<!-- 嵌套的likes属性也可以这么写 -->
<div id="favorite-fruits">{{ items[0]['likes'][0]['fruits']|join(', ') }}</div>

场景2：有多个对象，需要循环展示 #

用for循环遍历列表里的每一个字典对象，再逐个访问属性：

{% for person in items %}
  <div class="person-card">
    <h2>{{ person.name }} {{ person.lastname }}</h2>
    <p>年龄：{{ person.age }}</p>
    <h3>喜好：</h3>
    <ul>
      {% for category in person.likes %}
        {% if category.fruits %}
          <li>水果：{{ category.fruits|join(', ') }}</li>
        {% elif category.sweets %}
          <li>甜食：{{ category.sweets|join(', ') }}</li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
{% endfor %}

为什么之前会出现奇怪的渲染结果？ #

• 用{{ items['name'] }}页面为空：因为items是列表，用字符串索引会触发模板渲染错误，生产环境下默认会隐藏错误，所以页面显示为空。
• 循环时每个字符拆分显示：这说明你传递的是未解析的JSON字符串，Jinja2遍历字符串时会逐个字符处理，就出现了[ { " n a m e " : ... } ]这种效果。

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