如何在HTML页面的JavaScript中访问Django返回的JSON数据

你遇到的问题核心是：把JSON字符串当成了JavaScript对象来处理，所以才会出现键长度不符合预期的情况。咱们一步步来解决：

问题原因分析 #

你后端用json.dumps(context)把Python字典转成了JSON字符串，然后在模板里通过{{ myData | escapejs | safe }}输出到JS中——这时候dataFromDjango拿到的是一个字符串（比如"{\"movieName\": \"Avengers\", \"releaseYear\": \"2019\", \"boxOffice\": \"2.3B\"}"），而不是真正的JavaScript对象。

当你调用Object.keys(dataFromDjango)时，JS会把字符串当成类数组来处理，返回的是每个字符的索引（比如0,1,2,...），所以长度自然不是你预期的3。

解决方案1：解析JSON字符串为JS对象 #

最简单的修改方式是在JS里把字符串解析成对象：

// 把模板输出的JSON字符串解析为JavaScript对象
var dataFromDjango = JSON.parse("{{ myData | escapejs | safe }}");
console.log(dataFromDjango); // 现在是一个真正的对象
var t = Object.keys(dataFromDjango).length;
console.log(t); // 输出3，符合预期

解决方案2：直接让Django输出JS对象（更简洁安全） #

其实你不需要在后端手动json.dumps，可以直接把Python字典传到模板，用Django的过滤器直接转成JS对象：

修改Python代码：

context = {}
context['movieName'] = 'Avengers'
context['releaseYear'] = str(2019)
context['boxOffice'] = '2.3B'
# 直接传递字典，不用提前转成JSON字符串
return render(request, "InterfacePage.html", {"myData" : context})

修改JavaScript代码：

// 使用js过滤器，把Python字典直接转为JavaScript对象
var dataFromDjango = {{ myData | js }};
console.log(dataFromDjango);
var t = Object.keys(dataFromDjango).length;
console.log(t); // 输出3

方案3：用json_script标签（推荐复杂场景） #

如果你的数据结构更复杂，或者担心XSS风险，推荐用Django的json_script标签：

模板中添加：

<!-- 把数据渲染成一个隐藏的script标签 -->
{{ myData|json_script:"movie-data" }}

JavaScript代码：

// 读取script标签的内容并解析为对象
var dataFromDjango = JSON.parse(document.getElementById('movie-data').textContent);
console.log(dataFromDjango);
var t = Object.keys(dataFromDjango).length;
console.log(t);

这种方式会自动处理转义，安全性更高。

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