Django视图向JS传变量：动态生成PivotGrid字段报错解决

问题根源 #

直接用Jinja循环遍历field_list生成JS对象时，容易出现多余逗号或格式不兼容的语法错误，导致JS解析失败。更可靠的方式是将Python列表转换为合法的JSON格式，再在JS中处理。

解决方案1：使用Django的json_script过滤器（推荐，安全防XSS） #

这是Django官方推荐的安全传递Python数据到JS的方式，能避免XSS风险和格式错误。

模板代码 #

{# 将field_list渲染为安全的JSON脚本标签 #}
{{ field_list|json_script:"field-list-data" }}

<script>
// 读取JSON数据并转换为JS数组
const fieldList = JSON.parse(document.getElementById('field-list-data').textContent);

// 转换为dxPivotGrid所需的fields格式（每个字段对应一个配置对象）
const pivotFields = fieldList.map(field => ({
    dataField: field,
    // 可按需添加默认配置，比如area: 'row'、caption: field.toUpperCase()等
}));

// 初始化dxPivotGrid
$(function() {
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            fields: pivotFields,
            // 补充你的数据源存储配置
            store: /* 例如： DevExpress.data.AspNet.createStore({...}) */
        },
        // 其他PivotGrid配置项
    });
});
</script>

解决方案2：直接渲染JSON格式（简洁，适合可控字段列表） #

如果field_list的内容完全可控（无用户输入），可以直接用json过滤器将Python列表转为JS数组：

模板代码 #

<script>
// 直接将Python列表转为JS数组
const fieldList = {{ field_list|json|safe }};

// 转换为dxPivotGrid字段配置
const pivotFields = fieldList.map(field => ({
    dataField: field
}));

// 初始化dxPivotGrid
$(function() {
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            fields: pivotFields,
            store: /* 你的数据存储 */
        }
    });
});
</script>

为什么之前的循环会报错？ #

如果尝试用Jinja循环手动生成数组：

fields: [
{% for field in field_list %}
    { dataField: '{{ field }}' },
{% endfor %}
]

会在最后一个字段后多出一个逗号，导致JS语法解析错误（严格模式下或部分浏览器会直接报错）。而用JSON转换的方式能自动处理数组的逗号分隔，避免此类问题。

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