mi código es el siguiente:
document.querySelector('.ranking').innerHTML += '<p style="color:rgba(105, 109, 115, 0.465);">Jefes de incursión Actualizados con éxito...</p>';
const request = new XMLHttpRequest();
const url = 'https://raw.githubusercontent.com/pokemon-go-api/pokemon-go-api/gh-pages/api/raidboss.json';
request.open("GET", url);
request.send();
request.onreadystatechange = (e) => {
if (request.readyState == 4 && request.status == 200) {
const posts = JSON.parse(request.responseText);
posts.currentList.lvl1.forEach(item => {
document.getElementById("raid1").insertAdjacentHTML("beforeend", `
<div class="ranking_item">
<div class="ranking_img ${item.types[0]}">
<img src="${item.assets.image}">
<img src=${item.shiny ? "assets/img/icon/shiny_white.png" : "assets/img/icon/no-shiny-icon.png"} >
<div class="poke_type">
${item.types.map(a => '<div><img src="'+ a.types +'"></div>')}
</div>
<div class="ranking_name">
<span>${item.names.Spanish}</span>
</div>
</div>
<div class="ranking_info">
<div class="ranking_name" style="display: none;">
</div>
<span>PC Potenciado</span>
<p>${item.cpRangeBoost[0]} - ${item.cpRangeBoost[1]}</p>
<span>PC Normal</span>
<p>${item.cpRange[0]} - ${item.cpRange[1]}</p>
</div>`
); } );
}
}
<div class="ranking">
<div class="ranking_block" id="raid1">
</div>
</div>
me ayudarían con esto: estoy recorriendo el objet:
"types": [
"Normal",
"Flying"
]
intento acceder usando un map, para mostrar ambos resultados:
${item.types.map(t => '<div><img src="'+ t.types +'"></div>')}
y estoy obteniendo como resultado:
<div><img src="undefined"></div> , <div><img src="undefined"></div>
como podría hacer para obtener el nombre y convertirlo en imagen y evitar que salga la coma (,)
mi idea es extraer los nombres de los typos y mostrarlos dentro de un
<div> <img src"www.link.es/type1"></div>
<div> <img src"www.link.es/type2"></div>
mi json tiene algunos un Type y otros 2. ayuda por favor
types
, ejemplo: primer link eswww.link.es/Normal
, y el segundowww.link.es/Flying
, es así o me equivoco?