在Django模板中用JavaScript解析Django对象报错求助

先复盘下你的问题场景：
你在Django后端序列化了单个模型对象：

recent_data = leafSamples.objects.filter(field_name=str(fields_distinct[0])).latest('id')
recent_data_json = serializers.serialize('json', [recent_data])

然后在前端尝试解析：

var recentData = {{recent_data_json |safe}};
parsedData = JSON.parse(recentData);
console.log(parsedData)

结果一直碰到SyntaxError: JSON.parse: unexpected character的错误，对吧？

问题根源 #

你其实犯了一个很常见的小误区：serializers.serialize('json', [recent_data])返回的已经是一个JSON格式的字符串了，当你在模板里用{{recent_data_json |safe}}输出时，这个JSON字符串会被直接渲染成JavaScript的对象字面量。也就是说，recentData已经是一个可用的JS对象了，这时候再用JSON.parse()去解析它，就相当于给parse传了一个对象而非字符串，自然会触发语法错误。

两种解决方案 #

方案一：直接使用（推荐）

既然渲染后的内容已经是合法的JS对象，完全不需要再调用JSON.parse，直接用就行：

var recentData = {{recent_data_json |safe}};
console.log(recentData); // 直接访问对象属性，比如recentData[0].fields

方案二：强制用JSON.parse（适合特殊场景）

如果你因为某些原因必须用JSON.parse，那需要在Django后端把序列化后的JSON字符串再转义一次，让它变成一个可以被JS解析的字符串字面量：

import json
# 原序列化代码不变
recent_data = leafSamples.objects.filter(field_name=str(fields_distinct[0])).latest('id')
recent_data_json = serializers.serialize('json', [recent_data])
# 把JSON字符串再转成可被JS读取的字符串
recent_data_json_str = json.dumps(recent_data_json)

然后前端代码改成：

var recentDataStr = {{recent_data_json_str |safe}};
var parsedData = JSON.parse(recentDataStr);
console.log(parsedData);

额外提示 #

serializers.serialize返回的是一个包含单个对象的数组（因为你传了[recent_data]），所以访问数据的时候要注意是recentData[0].fields来获取模型的字段值，而不是直接recentData.fields哦。

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