0

compañeros me encuentro batallando con los objetos de una api no puedo acceder a ella, recurro a ustedes, ya me salvaron muchas veces de las cuales me encuentro agradecido. les dejo mi codigo en el cual estoy trabajando:

  document.querySelector('.ranking').innerHTML += '<p style="color:rgba(105, 109, 
 115,0.465);">Prueba...</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.forEach((post) => {
  if (post.currentList == "mega") { 
    document.getElementById("raid1").insertAdjacentHTML("beforeend", `
    <div class="ranking_item">
    <div class=""ranking_img ${post.currentList.mega[6].types[0]}"">
    
    <img src="${post.currentList.mega[3].assets[0].image}">
    <img  src=${post.currentList.mega[5].shiny ? "assets/img/icon/shiny_white.png" : "assets/img/icon/no-shiny-icon.png"} alt="shiny">
        <div class="ranking_name">
        <span>${post.currentList.mega[4].names.Spanish}</span>
        </div>
        
    </div>
    <div class="ranking_info">
    <div class="ranking_name" style="display: none;">
    
    </div>
   
    <span>PC Potenciado</span>
    
    <p>${post.currentList.mega[9].cpRangeBoost[0]}</p>
    <p>${post.currentList.mega[9].cpRangeBoost[1]}</p>
    <span>PC Normal</span>
    <p>${post.currentList.mega[9].cpRange[0]}</p>
    <p>${post.currentList.mega[9].cpRange[1]}</p>
    </div>`
    
    );
  }

});
  }
}
  <div class="ranking">
   <div  class="ranking_block" id="raid1"></div>
  </div>

intente de varias formas, sin resultado alguno, no puedo obtener los resultados de la api y mostrarlo en mi html.

espero puedan ayudarme, de antemano gracias (edite) el link para extraer los datos, sigue sin funcionar :(

1 respuesta 1

1

El primer problema no es que no podes acceder a la API, porque estás accediendo correctamente, sino que te devuelve un Object y lo manejas como un Array.

Fetched Object

Viendo que únicamente utilizabas la propiedad mega y es un Array, si cambias posts.forEach por posts.currentList.mega.forEach ya te queda iterando sobre el Array mega.

De ahí en adelante es simplemente tener en cuenta que ya estamos dentro de mega y cambiar los post.currentList.mega[6] por post, que sería cada item iterado. Yo lo nombré Item porque veía mucho post, pero te dejo el resultado de la función.

posts.currentList.mega.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"} alt="shiny">
       <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]}</p>
   <p>${item.cpRangeBoost[1]}</p>
   <span>PC Normal</span>
   <p>${item.cpRange[0]}</p>
   <p>${item.cpRange[1]}</p>
   </div>`
   );
})

Y no sé si es el resultado que esperabas, pero me renderiza lo siguiente: introducir la descripción de la imagen aquí

2
  • genial, muchas gracias, edito mi respuesta por que ya logre acceder. que tengas un buen dia
    – GAEL VM
    Commented el 19 feb. 2023 a las 14:12
  • me ayudarían con esto: ${item.types.map(t => '<div><img src="'+ t.types +'"></div>')} intento acceder a: "types": [ "Normal", "Flying" ] 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 (,)
    – GAEL VM
    Commented el 19 feb. 2023 a las 19:09

Tu Respuesta

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

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