Flask传递嵌套JSON列表至JS时转义问题求助

问题原因 #

Flask模板渲染时默认会对变量进行HTML转义（用于防范XSS攻击），这导致你的chatlist中的双引号被转换成了HTML实体"，使得JavaScript无法直接将其解析为可用的对象/数组。

解决方案 #

方案1：模板中使用safe过滤器 #

在渲染chatlist时，给变量加上| safe过滤器，明确告诉Flask该内容无需转义：

<script>
var chatList = {{ chatlist | safe }};
// 直接访问数据示例
console.log(chatList[0][0].user); // 输出 "lol"
console.log(chatList[1][1].msg); // 输出 "lol"
</script>

注意：需确保chatlist在Flask视图中已经通过json.dumps()转换为合法的JSON字符串，这样JavaScript才能直接将其识别为对象结构。

方案2：通过AJAX异步获取（复杂场景更推荐） #

如果数据需要动态加载或数据量较大，建议用AJAX请求传递：

1. Flask视图返回JSON响应：

from flask import jsonify

@app.route('/get_chat_list')
def get_chat_list():
    chatlist = [[{"user": "lol"}, {"msg": "lol has created this chat."}], [{"user": "lol"}, {"msg": "lol"}]]
    return jsonify(chatlist)

2. JavaScript中获取并解析数据：

fetch('/get_chat_list')
  .then(response => response.json())
  .then(chatList => {
    console.log(chatList[0][0].user); // 输出 "lol"
  });

这种方式完全规避了模板转义问题，数据直接以JSON格式传递，前端解析后可直接使用。

验证效果 #

处理后，chatList在JavaScript中的值会和Python中的原始格式完全一致：

[[{"user": "lol"}, {"msg": "lol has created this chat."}], [{"user": "lol"}, {"msg": "lol"}]]

你可以正常通过索引和键名访问内部元素，比如chatList[0][1].msg会返回"lol has created this chat."。

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