为什么歌曲详细信息没有显示在liked.handlebars视图中？

Question

我正在使用 Node.js、Express.js、Handlebars.js 和 MySQL 创建一个可以登录和分享歌曲的网站。我设置了一个 LikedSong 模型，将喜欢的歌曲与喜欢它的用户联系起来，并设置了允许用户喜欢歌曲并尝试查看喜欢的歌曲的路由。

问题是触发页面查看点赞歌曲时，没有显示歌曲信息。

喜欢一首歌曲会在 MySQL Workbench 的表中正确注册。并且我的路线中喜欢的歌曲数组的 console.log 在尝试将其发送到车把页面之前会返回该歌曲的所有信息

查看喜欢歌曲的路线：

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

    // Add liked songs associated with the user to the songs array
    const songs = [];
    for (let i = 0; i < likedSongs.length; i++) {
      songs.push(await likedSongs[i].getSong());
    }
    console.log("songs =", songs);

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

====================================================== ==============

Console.log('songs =", 歌曲) 结果：

songs = [
  song {
    dataValues: {
      id: 3,
      title: 'Playing God',
      artist: 'Polyphia',
      album: 'Remember That You Will Die',
      embed: '<iframe style="border-radius:12px"\n' +
        '    src="https://open.spotify.com/embed/track/3nBGFgfRQ8ujSmu5cGlZIU?utm_source=generator"\n' +
        '    width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay;\n' +
        '    clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>',
      genre_id: 1,
      createdAt: 2023-08-26T20:40:08.000Z,
      updatedAt: 2023-08-26T20:40:08.000Z
    },
    _previousDataValues: {
      id: 3,
      title: 'Playing God',
      artist: 'Polyphia',
      album: 'Remember That You Will Die',
      embed: '<iframe style="border-radius:12px"\n' +
        '    src="https://open.spotify.com/embed/track/3nBGFgfRQ8ujSmu5cGlZIU?utm_source=generator"\n' +
        '    width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay;\n' +
        '    clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>',
      genre_id: 1,
      createdAt: 2023-08-26T20:40:08.000Z,
      updatedAt: 2023-08-26T20:40:08.000Z
    },
    uniqno: 1,
    _changed: Set(0) {},
    _options: {
      isNewRecord: false,
      _schema: null,
      _schemaDelimiter: '',
      raw: true,
      attributes: [Array]
    },
    isNewRecord: false
  },
  song {
    dataValues: {
      id: 7,
      title: 'Solo',
      artist: 'Samsa',
      album: 'Solo',
      embed: '<iframe style="border-radius:12px"\n' +
        '    src="https://open.spotify.com/embed/track/0oinJU5psqs6JSRT1k9Wfz?utm_source=generator"\n' +
        '    width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write;\n' +
        '    encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>',
      genre_id: 2,
      createdAt: 2023-08-26T20:40:08.000Z,
      updatedAt: 2023-08-26T20:40:08.000Z
    },
    _previousDataValues: {
      id: 7,
      title: 'Solo',
      artist: 'Samsa',
      album: 'Solo',
      embed: '<iframe style="border-radius:12px"\n' +
        '    src="https://open.spotify.com/embed/track/0oinJU5psqs6JSRT1k9Wfz?utm_source=generator"\n' +
        '    width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write;\n' +
        '    encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>',
      genre_id: 2,
      createdAt: 2023-08-26T20:40:08.000Z,
      updatedAt: 2023-08-26T20:40:08.000Z
    },
    uniqno: 1,
    _changed: Set(0) {},
    _options: {
      isNewRecord: false,
      _schema: null,
      _schemaDelimiter: '',
      raw: true,
      attributes: [Array]
    },
    isNewRecord: false
  },
  song {
    dataValues: {
      id: 1,
      title: 'Music to Clean the House to',
      artist: 'Nick Leng',
      album: 'LEMONS',
      embed: '<iframe style="border-radius:12px" \n' +
        '    src="https://open.spotify.com/embed/track/18HzHlxWPLoJjEXJdzNf4V?utm_source=generator" \n' +
        '    width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; \n' +
        '    encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>',
      genre_id: 5,
      createdAt: 2023-08-26T20:40:08.000Z,
      updatedAt: 2023-08-26T20:40:08.000Z
    },
    _previousDataValues: {
      id: 1,
      title: 'Music to Clean the House to',
      artist: 'Nick Leng',
      album: 'LEMONS',
      embed: '<iframe style="border-radius:12px" \n' +
        '    src="https://open.spotify.com/embed/track/18HzHlxWPLoJjEXJdzNf4V?utm_source=generator" \n' +
        '    width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; \n' +
        '    encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>',
      genre_id: 5,
      createdAt: 2023-08-26T20:40:08.000Z,
      updatedAt: 2023-08-26T20:40:08.000Z
    },
    uniqno: 1,
    _changed: Set(0) {},
    _options: {
      isNewRecord: false,
      _schema: null,
      _schemaDelimiter: '',
      raw: true,
      attributes: [Array]
    },
    isNewRecord: false
  }
]

====================================================== ===

喜欢的车把：

<section class="genre">
  {{#if songs.length}}
    {{#each songs as |song|}}
      <div class="song-details">
        <h3>{{song.title}}</h3>
        <p>Album: {{song.album}}</p>
        <p>By: {{song.artist}}</p>
        {{{song.embed}}}
      </div>
    {{/each}}
  {{else}}
    <h3>No liked songs found!</h3>
  {{/if}}
</section>

====================================================== =

like.handlebars 页面上显示的唯一内容是不尝试提取歌曲信息的文本。

所以只有

》专辑：

作者：“

或“未找到喜欢的歌曲！”

如果我还没有喜欢一首歌。

感谢您提供的任何帮助！我一直在努力解决这个问题一段时间，但没有成功，如果您需要更多信息，请告诉我

Answer 1

我认为你可能需要更深入地了解你的对象。试试这个：

<section class="genre">
    {{#if songs.length}}
        {{#each songs}}
            <div class="song-details">
                <h3>{{this.song.dataValues.title}}</h3>
                <p>Album: {{this.song.dataValues.album}}</p>
                <p>By: {{this.song.dataValues.artist}}</p>
                {{{this.song.dataValues.embed}}}
            </div>
        {{/each}}
    {{else}}
        <h3>No liked songs found!</h3>
    {{/if}}
</section>