Django JSONField值通过JavaScript提取时JSON格式异常

问题根源 #

你在模板中直接输出group.group_users时，Django会将Python列表转换成Python风格的字符串表示（用单引号包裹元素），比如['hello@world', 'foo@bar']，但标准JSON要求使用双引号，这直接导致JSON.parse解析失败。

正确解决方案 #

方案1：使用Django内置json_script模板标签（推荐）

这个标签会自动将Python数据序列化为标准JSON格式，同时避免XSS风险：

<div id="group-modal">
    {% for group in form.groups.field.queryset %}
        <label>
            <input type="checkbox" class="group-checkbox" value="{{ group.id }}" data-members-id="group-members-{{ group.id }}">
            {{ group.name }}
        </label>
        {{ group.group_users|json_script:"group-members-{{ group.id }}" }}
        <br>
    {% endfor %}
</div>

对应的JavaScript获取逻辑：

document.querySelectorAll('.group-checkbox').forEach(checkbox => {
    const membersId = checkbox.dataset.membersId;
    const members = JSON.parse(document.getElementById(membersId).textContent);
    // 这里可以直接使用members数组做后续处理
});

方案2：视图层提前序列化

在视图中为每个分组生成标准JSON字符串，再传递到模板：

import json
# 假设你已获取目标分组queryset
groups = UserGroup.objects.filter(owner=request.user)
for group in groups:
    group.serialized_members = json.dumps(group.group_users)

模板中直接使用序列化后的内容：

<input type="checkbox" class="group-checkbox" value="{{ group.id }}" data-members="{{ group.serialized_members|safe }}">

注意 #

直接使用|safe过滤器只是关闭HTML转义，并没有改变Python列表的字符串格式（单引号），所以无法解决JSON解析问题，必须用专门的JSON序列化方法处理。

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