在Django视图的HTML JavaScript中访问列表类型上下文变量

嘿，我来帮你搞定这个问题！从Django视图把列表传到HTML的JavaScript里其实有几种靠谱的方法，我给你详细拆解下：

这是最安全、最省心的方式，Django会帮你自动处理转义和XSS防护的问题，步骤超简单：

1. 在HTML模板的合适位置（比如</body>标签前），用json_script过滤器输出你的列表：

{{ unclean|json_script:"unclean-data" }}

2. 接着在<script>标签里获取并解析这个数据：

// 通过id找到对应的script元素，解析它的内容
const uncleanList = JSON.parse(document.getElementById('unclean-data').textContent);
// 现在就能正常使用这个列表啦，比如打印验证下
console.log('拿到的列表：', uncleanList);

这个标签会生成一个type="application/json"的隐藏script标签，完全不会影响页面渲染，还能避免各种语法错误和安全问题。

如果不想用模板标签，也可以在视图层先把列表转成JSON格式，再传到模板：

1. 先在views.py里导入json模块，然后处理上下文：

import json

# 假设你已经有了unclean这个列表
context = {
    'unclean': unclean,
    'unclean_json': json.dumps(unclean)
}

2. 然后在HTML的<script>里使用，记得加上escapejs过滤器转义特殊字符：

const uncleanList = JSON.parse('{{ unclean_json|escapejs }}');
console.log(uncleanList);

⚠️ 注意：这个方法一定要加escapejs，不然如果列表里包含引号、换行符这类字符，会直接导致JS语法报错，而且安全风险也比第一种高。

千万别直接写const uncleanList = {{ unclean }};！虽然Python的列表格式看起来和JS数组很像，但Django输出的是Python风格的字符串，一旦列表里有带引号的字符串，直接用会触发JS语法错误，还可能引入XSS漏洞。

内容的提问来源于stack exchange，提问作者Ang Yang Cheng