无法通过数组访问所需信息 object javascript

Question

更详细的图片

我正在尝试访问所有 parent_platforms 的 platform.name 但是我得到了一堆逗号作为回报。 我很确定我应该使用 .map function 来遍历 parent_platform 中的所有 platform.name。 基本上我想要的 output 将是所有平台的名称，如这台 PC、PlayStation、Xbox 这是我目前的代码。 谢谢

function showGames(game)
{
  game.forEach(game => {
    console.log(game);
    const card = document.createElement('div');
    card.classList.add('card');
    card.innerHTML = `
    <div class="card-top">
      <img src="${game.background_image}" alt="" class="card-image">
    </div>
    <div class="card-bottom">
      <h1>${game.name}</h1>
      <h3>Release date: ${game.released}</h3>
      <p>Platforms: ${game.parent_platforms.map(platform => platform.name)}</p>
      <p>Rating: ${game.rating}</p>
    </div>
    `;
    main.appendChild(card);
  })
}

Answer 1

您对 map 的使用将给出一个平台名称数组，但是您将获得一个标准数组表示形式（转换为字符串），这不太可能是您在 HTML 表示形式中实际想要的。

您可能想尝试使用 Array.join，如下所示：

${game.parent_platforms.map(platform => platform.name).join()}

这会将格式为“PC,PlayStation,Xbox”的字符串插入到 HTML output 中。如果您想要不同的分隔符，请将其添加为参数以加入，因此：

${game.parent_platforms.map(platform => platform.name).join(', ')}

正如其他评论者指出的那样，代码 rest 的结构存在问题，但这回答了您关于使用 map 的问题。

正如@danh 所提到的，还缺少级别的取消引用（我正在重命名 parent_platforms 元素以使其清楚）：

${game.parent_platforms.map(element => element.platform.name).join()}

Answer 2

如果这是需要映射的...

[{"platform":{"id":1,"name":"PC","slug":"pc"}},{"platform":{"id":2,"name":"PlayStation","slug":"playstation"}},{"platform":{"id":3,"name":"Xbox","slug":"xbox"}}]

这是映射代码...

game.parent_platforms.map(platform => platform.name)

你肯定会得到一个空数组。 那里还嵌套了一层object，如下...

game.parent_platforms.map(platform => platform.platform.name)
//                                             ^^^^^^^^