通过数组对象访问所需信息时遇到问题 javascript

Question

A more detailed picture

我正在尝试为所有 parent_platforms 访问 platform.name，但是我在 return 中得到了一堆逗号。我很确定我应该使用 .map 函数遍历 parent_platform 中的所有 platform.name。基本上我想要的输出是所有平台的名称，比如这台 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 输出中。如果您想要不同的分隔符，请将其添加为加入的参数，因此：

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

正如其他评论者指出的那样，其余代码的结构存在问题，但这回答了您关于使用 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)

你肯定会得到一个空数组。还有一层对象嵌套在那里，如下...

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

通过数组对象访问所需信息时遇到问题 javascript

Having trouble accessing required info through array object javascript

javascript

arrays

api

object