Django Sounds模型序列化后无法在game.js中使用的问题求助

我来帮你梳理下代码里的问题，其实就是几个小细节没处理到位，调整后就能正常运行了：

1. 模板变量引用错误 #

你在views.py里把序列化后的声音数据存在了context的sounds键里，但在game.js里却写了{{ context|safe }}——这里的context是Django传给模板的整个上下文对象，你需要直接引用里面的sounds变量才对，也就是改成{{ sounds|safe }}。

2. JSON字符串转JS对象 #

Django序列化出来的是JSON格式的字符串，直接插到JS里还是字符串类型，没法直接操作里面的对象属性，得用JSON.parse()把它转换成JavaScript对象。

修正后的完整代码示例 #

views.py（保持不变） #

def index(request):
    context = {'sounds': serializers.serialize('json', Sounds.objects.all()) }
    return render(request, 'index.html', context)

index.html（调整变量传递方式） #

<button type="submit" onclick="main()">Let's Start!</button>

<!-- 先在模板里把JSON转成JS对象，确保在game.js之前加载 -->
<script>
const soundsData = JSON.parse('{{ sounds|safe }}');
</script>
<script src="{% static 'game.js' %}"></script>

game.js（使用转换后的JS对象） #

function main(){
    console.log(soundsData); // 现在可以正常打印所有序列化后的对象了
    
    // 如果你想访问单个声音的字段，注意Django序列化的结构：每个对象的字段存在fields里
    soundsData.forEach(sound => {
        console.log("声音名称：", sound.fields.name);
        // 替换成你的Sounds模型里的实际字段名
    });
}

补充说明 #

Django的serializers.serialize()默认会输出包含model、pk、fields的结构，比如：

[{"model": "your_app.sounds", "pk": 1, "fields": {"name": "bgm", "url": "/static/sounds/bgm.mp3"}}]

所以要访问具体的字段值，得通过sound.fields.字段名来获取。

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