1

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

0

1 respuesta 1

2

Como es un array sería mejor usar un for, pero tú lo tienes dentro de un literal template, así que mejor usar un map

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"> 
                        ${post.types.map(t => '<img src="' + t.image + '">')}
                        <span>${post.name}</span>

//El resto del código
4
  • gracias por responder, Yussed, si veo 2 objetos, pero no muestra las imagenes. <img src="[object Object]"> "," <img src="[object Object]"> eso es lo que obtengo.
    – GAEL VM
    el 26 dic. 2022 a las 23:44
  • Edité el código, vuelve a probar
    – Yussef
    el 27 dic. 2022 a las 1:09
  • Genial, eres un crack! gracias por tu tiempo
    – GAEL VM
    el 27 dic. 2022 a las 1:13
  • De nada , me alegro haber podido ayudarte
    – Yussef
    el 27 dic. 2022 a las 1:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.