Flask中如何在HTML页面整洁展示Python字典？

问题根源 #

Flask默认使用的Jinja2模板引擎会自动转义HTML特殊字符（比如双引号被转成"），你在后端用json.dumps()生成的JSON字符串，直接在模板中输出时会被转义，导致JavaScript无法正确解析这个JSON，所以页面没数据。

解决方法1：直接传字典，用Jinja2的tojson过滤器（推荐） #

不需要在后端手动转JSON，直接把Python字典传给模板，用tojson过滤器生成符合JS语法的对象，避免转义问题。

Python代码

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 示例大型字典
    large_dict = {
        'a': True,
        'b': False,
        'user_info': {'name': 'Alice', 'age': 30},
        'data_list': [1, 2, 3, {'key': 'value'}]
    }
    return render_template("index.html", data=large_dict)

HTML代码

<div class="w3-container">
    <pre id="dict"></pre>
</div>

<script>
    // 用tojson过滤器直接生成合法JS对象
    var data = {{ data|tojson }};
    // 格式化输出，缩进2空格保证可读性
    document.getElementById("dict").innerHTML = JSON.stringify(data, undefined, 2);
</script>

解决方法2：后端转JSON，前端用safe过滤器关闭转义 #

如果必须在后端先转成JSON字符串，在模板输出时用safe过滤器告诉Jinja2不要转义这个字符串，让JavaScript能直接解析。

Python代码

from flask import Flask, render_template
import json

app = Flask(__name__)

@app.route('/')
def index():
    large_dict = {
        'a': True,
        'b': False,
        'user_info': {'name': 'Bob', 'age': 25},
        'data_list': [4, 5, 6, {'key': 'another_value'}]
    }
    a_json = json.dumps(large_dict)
    return render_template("index.html", a_json=a_json)

HTML代码

<div class="w3-container">
    <pre id="dict"></pre>
</div>

<script>
    // 用safe过滤器避免JSON字符被转义
    var data = {{ a_json|safe }};
    document.getElementById("dict").innerHTML = JSON.stringify(data, undefined, 2);
</script>

额外说明 #

• JSON.stringify(data, undefined, 2)中的第三个参数2是缩进空格数，可根据需要调整，让大型字典的层级结构更清晰。
• 推荐方法1，因为tojson过滤器会自动处理JS语法的兼容转义（比如单引号、换行符等），比手动调用json.dumps更稳妥。

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