0
293
VistasTiene problemas para acceder a la información requerida a través de javascript de objeto de matriz
Estoy tratando de acceder a la plataforma. nombre para todas las plataformas principales, sin embargo, recibo un montón de comas a cambio. Estoy bastante seguro de que se supone que debo usar la función .map para iterar a través de todas las plataformas.nombre en parent_platform. Básicamente, mi resultado deseado serían los nombres de todas las plataformas como esta PC, PlayStation, Xbox. Aquí está mi código actual hasta ahora. Gracias
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); }) }2 Respuestas
Responde la pregunta0
Si esto es lo que hay que mapear...
[{"platform":{"id":1,"name":"PC","slug":"pc"}},{"platform":{"id":2,"name":"PlayStation","slug":"playstation"}},{"platform":{"id":3,"name":"Xbox","slug":"xbox"}}]y este es el código de mapeo...
game.parent_platforms.map(platform => platform.name)Sin duda obtendrá una serie de valores nulos. Hay otro nivel de anidamiento de objetos allí, como sigue...
game.parent_platforms.map(platform => platform.platform.name) // ^^^^^^^^0
Su uso del mapa le dará una matriz de los nombres de la plataforma, pero luego obtendrá una representación de matriz estándar (conversión a cadena) que es poco probable que sea lo que realmente desea en la representación HTML.
Es posible que desee intentar usar Array.join, así:
${game.parent_platforms.map(platform => platform.name).join()}Esto insertará una cadena con formato como "PC, PlayStation, Xbox" en la salida HTML. Si desea un separador diferente, agréguelo como argumento para unirse, así:
${game.parent_platforms.map(platform => platform.name).join(', ')}La estructura del resto del código es problemática, como han señalado otros comentaristas, pero esto responde a su pregunta sobre el uso del mapa.
Como menciona @danh, también falta un nivel de desreferenciación (cambio el nombre del elemento parent_platforms para que quede claro):
${game.parent_platforms.map(element => element.platform.name).join()}