如何在JavaScript循环中遍历Django模型？解决引用报错问题

嘿，我来帮你搞定这个问题！你遇到的ReferenceError: reservations is not defined以及后续遍历失败的问题，主要是因为Python数据结构没有正确转换成JavaScript可识别的格式，还有一些小细节没处理好。咱们一步步来解决：

问题根源分析 #

1. 数据格式不兼容：你在视图里把reserved转成了Python集合set(res)，直接在模板里用{{ reserved|safe }}输出的话，得到的是类似{<Movie: 复仇者联盟>, <Movie: 流浪地球>}这样的字符串——这根本不是合法的JavaScript数组/对象，JS自然无法识别和遍历。
2. 函数名潜在冲突：你定义的函数名是reservations，如果你的onclick事件调用的也是这个函数名，或者上下文里有同名变量，可能会导致混淆（不过这次主要问题还是数据格式）。

解决方案 #

第一步：在视图层正确序列化数据 #

先把Python的模型集合转换成JS能解析的JSON格式，推荐两种方式：

方式1：手动提取需要的字段（简单直接）

修改views.py，把每个Movie对象转成只包含你需要字段的字典列表：

res = []
res.extend([x.movie for x in reserved.reservations.all()])
# 提取id、title等需要的字段，转成字典列表
reserved_list = [{"id": movie.id, "title": movie.title} for movie in set(res)]

context={
    "user_info": user_info,
    "reserved": reserved_list  # 传入处理后的列表
}

方式2：用Django内置序列化器（适合复杂模型）

如果模型字段多，用Django的序列化工具直接转成JSON：

from django.core import serializers

res = []
res.extend([x.movie for x in reserved.reservations.all()])
# 序列化指定字段，得到JSON字符串
reserved_json = serializers.serialize('json', set(res), fields=('id', 'title'))

context={
    "user_info": user_info,
    "reserved": reserved_json
}

第二步：在模板层正确渲染JS数据 #

推荐用Django的json_script模板标签（安全且规范），或者json过滤器来处理数据：

方案1：使用json_script标签（优先推荐）

这种方式会把JSON数据嵌入到一个隐藏的<script>标签里，避免XSS风险，也不会和其他代码冲突：

<!-- 把reserved数据嵌入到id为reserved-data的标签里 -->
{{ reserved|json_script:"reserved-data" }}

<script>
// 重命名函数，避免和变量名冲突
function showReservations() {
    // 解析JSON数据
    const all_reserved = JSON.parse(document.getElementById('reserved-data').textContent);
    // 遍历数据
    for (let x = 0; x < all_reserved.length; x++) {
        console.log(all_reserved[x].title);
    }
}
</script>

<!-- 确保你的onclick调用的是正确的函数名 -->
<a href="#" onclick="showReservations()">查看我的预订</a>

方案2：使用json过滤器（Django 2.1+支持）

如果你的Django版本在2.1以上，可以直接用json过滤器把Python列表转成JS数组：

<script>
function showReservations() {
    // 用json过滤器转成JS数组，再加safe让Django不转义
    const all_reserved = {{ reserved|json|safe }};
    for (let x = 0; x < all_reserved.length; x++) {
        console.log(all_reserved[x].title);
    }
}
</script>

额外注意事项 #

• 不要直接把Django模型对象传给JS：模型对象的字符串表示不是JSON，必须提取字段或者序列化后再传递。
• 检查函数调用一致性：确保onclick事件里的函数名和你定义的函数名完全一致（比如之前的reservations和现在的showReservations）。
• 避免XSS风险：用json_script或者json过滤器比直接用safe更安全，因为它们会自动处理特殊字符。

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