liked.handlebars视图中歌曲详情无法显示的问题排查

问题根源 #

从你提供的控制台输出可以看到，传递给Handlebars的songs数组中的每一项都是Sequelize模型实例，实际的歌曲数据存储在实例的dataValues属性中。Handlebars无法直接读取模型实例内部的属性，这就是页面仅显示静态文本（如"Album:"），但动态数据为空的原因。

修复方法 #

方法一：将模型实例转为普通JavaScript对象 #

在将歌曲实例推入数组时，使用get({ plain: true })方法把Sequelize实例转换为纯对象：

const songs = [];
for (let i = 0; i < likedSongs.length; i++) {
  songs.push(await likedSongs[i].getSong({ plain: true }));
}

方法二：优化查询逻辑，复用已关联数据 #

你已经在findAll中通过include: [Song]关联了歌曲数据，无需再循环调用getSong，直接从返回结果中提取关联数据并转为纯对象即可，性能更优：

router.get("/liked", withAuth, async (req, res) => {
  try {
    const likedSongs = await LikedSong.findAll({
      where: {
        userId: req.session.user_id,
      },
      include: [Song],
    });

    // 提取关联的Song数据并转为纯对象
    const songs = likedSongs.map(item => item.Song.get({ plain: true }));
    
    console.log("songs =", songs);

    res.render("liked", {
      songs,
      loggedIn: req.session.loggedIn,
    });
  } catch (err) {
    console.log(err);
    res.status(500).json(err);
  }
});

模板验证 #

你的Handlebars模板逻辑是正确的：当songs数组有内容时会循环渲染歌曲信息，无内容时显示提示文本。修复后，songs数组中的每一项都是普通对象，Handlebars可以正常访问title、album、artist等属性。

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