Flask应用：解析API返回的嵌套JSON字符串为字典以在HTML中取值

这个问题其实很常见——你拿到的content字段是JSON格式的字符串，不是现成的字典，所以模板里直接按字典访问肯定会报错。咱们只需要在后端把这个字符串解析成Python字典，模板就能正常使用了。

步骤1：在后端解析JSON字符串 #

在你获取到API响应后，遍历data列表，对每个item的content字段用json.loads()做解析。为了避免解析失败导致程序崩溃，建议加上异常处理：

修改你的Flask视图函数代码如下：

import json
from flask import Flask, render_template, jsonify
import requests

app = Flask(__name__)

@app.route('/')
def index():
    url = "http://remote-server/v1/info"
    params = {"offset":0,"limit":10}
    response = requests.post(url, json=params)
    data = response.json()
    
    # 关键：解析content字段的JSON字符串为字典
    for item in data:
        if 'content' in item and isinstance(item['content'], str):
            try:
                item['content'] = json.loads(item['content'])
            except json.JSONDecodeError as e:
                # 解析失败时的 fallback 处理，比如设为空字典
                print(f"解析content字段出错: {e}")
                item['content'] = {}
    
    return render_template('index.html', data=data)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

步骤2：模板中正常访问字段 #

现在content已经是字典类型了，你原来写的模板代码就能正常工作了。如果担心某些字段不存在会报错，可以用get()方法做容错处理（可选）：

<div>
    {% for doc in data %}
    <div class="user_info">{{ doc['full_name'] }}</div>
    <div class="user_info">{{ doc['email'] }}</div>
    <!-- 用get()避免KeyError -->
    <div class="user_info">{{ doc['content'].get('info', {}).get('foo', '暂无数据') }}</div>
    <div class="user_info">{{ doc['content'].get('info', {}).get('location', '暂无数据') }}</div>
    {% for item in doc.content.get('items', []) %}
    <div>{{ item }}</div>
    {% endfor %}
    {% endfor %}
</div>

这样修改后，你就能在模板里像访问普通字典一样提取content里的嵌套字段了。

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