修复Python Flask应用中JSON.parse解析JSON的语法错误

该报错是重复JSON序列化+错误包裹字符串导致的转义混乱，和你猜测的引号问题直接相关：

1. 你在Python侧已经调用pandas的to_json()把DataFrame转成了JSON格式字符串
2. 模板里又使用了Flask的|tojson过滤器，该过滤器会对传入值做第二次JSON序列化，同时默认进行HTML字符转义
3. 你额外手动给模板表达式外层套了单引号、再调用JSON.parse，最终渲染出的JS代码里，传入parse的字符串开头为"{m，按0起始索引计算位置3刚好是字符m，完全匹配你看到的Unexpected token m in JSON at position 3报错。

• 右键浏览器页面查看源代码，定位到对应script标签，直接观察渲染后的实际JS代码，能直观看到转义错乱的字符串内容
• 核对序列化链路：后端数据传到前端JS作为对象使用，仅需要做一次JSON序列化，重复序列化必然导致格式错误
• 确认JSON.parse的入参要求：必须是合法的JSON格式字符串，多余的包裹字符、未转义的特殊字符都会触发解析失败

以下两种方案二选一即可，优先选方案1，兼容性更好。

方案1（推荐）：移除重复序列化逻辑，直接输出JS对象 #

不需要在Python端提前把DataFrame转成JSON字符串，直接传原生Python字典结构到模板，依靠|tojson过滤器自动完成序列化，无需手动调用JSON.parse：

1. 修改Python端代码（注意原代码漏了Flask实例初始化，同步补上）：

import pandas as pd
from flask import Flask, render_template

app = Flask(__name__)
test_data = [['mack', 10, 988], ['john', 15, 200], ['jane', 14, 590]]
test_df = pd.DataFrame(test_data, columns=['Name', 'Age', 'Score'])
# 转成原生Python字典，不要提前转JSON字符串
json_df = test_df.set_index('Name').to_dict(orient='index')
    
@app.route("/hello")
def index():
    return render_template("index.html", json_df=json_df)

2. 修改模板内的JS代码，去掉外层单引号和JSON.parse调用：

<script>
    const json_df = {{ json_df|tojson }};
    console.log(json_df);
</script>

渲染后直接得到你预期的对象结构，不存在转义风险。

方案2：保留Python端预转JSON逻辑，调整模板过滤器 #

如果你需要在Python端提前生成JSON字符串，就去掉模板端的|tojson过滤器，添加|safe禁止HTML自动转义，再调用JSON.parse：

1. Python端保持原有逻辑不变，即保留json_df = test_df.set_index('Name').to_json(orient='index')的写法
2. JS代码修改为：

<script>
    const json_df = JSON.parse('{{ json_df|safe }}');
    console.log(json_df);
</script>

注意：该方案存在潜在风险，如果JSON内容本身包含单引号，会导致JS字符串截断触发新的报错，非必要不选该方案。

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