Django前端Playlist字段显示null但后台有有效值问题求助

问题根源 #

你在视图中使用Composition.objects.all().values()获取数据时，Django的values()方法默认仅包含当前模型的字段。对于playlist这个ForeignKey字段，它默认存储的是关联PlayList对象的ID（对应字段名是playlist_id），而非播放列表的名称。因此前端代码中尝试访问musics[compositionIndex].playlist时，该键不存在，最终显示为null。

修复步骤 #

1. 修改视图查询，包含播放列表名称 #

将视图中composition_list的查询语句修改为明确指定所需字段，包括关联的播放列表名称：

def homepage(request):
    composition = Composition.objects.all()
    # 明确指定字段，通过双下划线获取关联模型的name字段
    composition_list = list(Composition.objects.all().values(
        'id', 'title', 'artist', 'time_length', 'audio_file', 'cover_image',
        'playlist__name'  # 获取播放列表名称
    ))
    return render(request, 'base.html', {
        'composition': composition,
        'composition_list': composition_list
    })

如果希望前端使用更友好的字段名，可通过F()表达式给字段起别名：

from django.db.models import F

def homepage(request):
    composition = Composition.objects.all()
    composition_list = list(Composition.objects.all().values(
        'id', 'title', 'artist', 'time_length', 'audio_file', 'cover_image',
        playlist_name=F('playlist__name')  # 给字段起别名
    ))
    return render(request, 'base.html', {
        'composition': composition,
        'composition_list': composition_list
    })

2. 修改前端JS代码，匹配正确字段名 #

如果使用第一种方式（字段名为playlist__name），修改setSRC函数：

const setSRC = () => {
    player.src = `{{ MEDIA_URL }}/${musics[compositionIndex].audio_file}`
    song_title.textContent = musics[compositionIndex].title
    artist.textContent = musics[compositionIndex].artist
    music_img.setAttribute('src', `{{ MEDIA_URL }}/${musics[compositionIndex].cover_image}`)
    playlist_name.textContent = musics[compositionIndex].playlist__name  // 替换为对应字段
}

如果使用别名playlist_name，则修改为：

playlist_name.textContent = musics[compositionIndex].playlist_name

额外优化建议 #

给PlayList模型添加__str__方法，方便在admin及其他场景下直观查看播放列表名称：

class PlayList(models.Model):
    name = models.CharField(max_length=500)
    
    def __str__(self):
        return self.name

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