更詳細的圖片
我正在嘗試訪問所有 parent_platforms 的 platform.name，但是我得到了一堆逗號作為回報。我很確定我應該使用 .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 >
<img src="${game.background_image}" alt="通過陣列物件 javascript 訪問所需資訊時遇到問題" >
</div>
<div >
<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);
})
}
uj5u.com熱心網友回復：
如果這是需要映射的...
[{"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)
// ^^^^^^^^
uj5u.com熱心網友回復：
您對 map 的使用將給出一個平臺名稱陣列，但是您將獲得一個標準的陣串列示（轉換為字串），這不太可能是您在 HTML 表示中真正想要的。
您可能想嘗試使用 Array.join，如下所示：
${game.parent_platforms.map(platform => platform.name).join()}
這將在 HTML 輸出中插入一個格式為“PC,PlayStation,Xbox”的字串。如果您想要不同的分隔符，請將其添加為 join 的引數，因此：
${game.parent_platforms.map(platform => platform.name).join(', ')}
正如其他評論者所指出的那樣，其余代碼的結構存在問題，但這回答了您關于使用 map 的問題。
正如@danh 提到的，還缺少一個取消參考級別（我正在重命名 parent_platforms 元素以使其清楚）：
${game.parent_platforms.map(element => element.platform.name).join()}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/469112.html
標籤：javascript 数组 api 目的
下一篇：如何在C中逐一提示輸入？