tengo una consulta; necesito acceder al segundo Types del archivo json:
[
{
"name": "Pikachu",
"tier": "Tier 1",
"canBeShiny": true,
"types": [
{
"name": "electric",
"image": "img/types/electric.png"
}
],
"combatPower": {
"normal": {
"min": 493,
"max": 536
},
"boosted": {
"min": 616,
"max": 670
}
},
"boostedWeather": [
{
"name": "rainy",
"image": "img/weather/rainy.png"
}
],
"image":
"img/pokemon_icons/pokemon_icon_pm0025_01_pgo_winter2020.png"
},
{
"name": "Alolan Sandshrew",
"tier": "Tier 1",
"canBeShiny": true,
"types": [
{
"name": "ice",
"image": "img/types/ice.png"
},
{
"name": "steel",
"image": "img/types/steel.png"
}
],
"combatPower": {
"normal": {
"min": 688,
"max": 739
},
"boosted": {
"min": 860,
"max": 924
}
},
"boostedWeather": [
{
"name": "snowy",
"image": "img/weather/snowy.png"
}
],
"image": "img/pokemon_icons/pokemon_icon_027_61.png"
},
]
Al primero logro llamarlo de este modo: ${post.types[0].name} y se muestra sin problema alguno, cuando intento llamar al segundo simplemente no me aparece, hay algunos types que solo tienen un name y una imagen.
el codigo con el cual intento llamarlo es el siguiente:
${post.types[1].name}
pero no lo reconoce
ayuda por favor!
dejo el codigo, el cual me estuvieron ayduando a realizarlo aqui en este grupo:
const request = new XMLHttpRequest();
const url = '/raids.json';
request.open("GET", url);
request.send();
request.onreadystatechange = (e) => {
if (request.readyState == 4 && request.status == 200) {
const posts = JSON.parse(request.responseText);
posts.forEach((post) => {
if (post.tier == "Tier 1") {
document.getElementById("raid1").insertAdjacentHTML("beforeend", `
<div class="ranking_item">
<div class="ranking_img ${post.types[0]}">
<img src="${post.image}">
<div class="ranking_name">
<img src=${post.canBeShiny ? "imagen/iconos/shiny_white.png" :
"imagen/iconos/no-shiny-icon.png"} alt="shiny">
<img src="${post.types[0].image}">
<img src="${post.types[1].image}">
<span>${post.name}</span>
</div>
</div>
<div class="ranking_info">
<div class="ranking_name" style="display: none;">
<span>${post.name}</span>
</div>
<span><strong>Potenciado</strong><img
src="${post.boostedWeather[0].image}"></span>
<p><strong>CP ${post.combatPower.boosted.min} -
${post.combatPower.boosted.max} </strong></p>
<span>Normal</span>
<div class="ranking_rapido">
<div>
<span>CP ${post.combatPower.normal.min} -
${post.combatPower.normal.max} </span>
</div>
<span> </span>
</div>
</div>
</div>`
);
}
espero puedan ayudarme, gracias de antemano, Feliz Navidad