2

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

2
  • 1
    Buen día, hasta lo que entiendo es que quieres generar un link para cada elemento del arreglo de types, ejemplo: primer link es www.link.es/Normal, y el segundo www.link.es/Flying, es así o me equivoco? el 19 feb. a las 22:29
  • 1
    exacto, tal cual: www.link.es/Normal.png que los obtenga automáticamente de mi json, las imágenes las guardaria en cualquier almacenamiento en de imágenes
    – GAEL VM
    el 19 feb. a las 22:30

1 respuesta 1

3

Te doy un ejemplo.

Tendrías que primero ingresar a los valores de la clave types, que en este caso es el array con los elementos que irán en el src de tus imágenes, así:

const types = obj.types; // aquí ya ingresé a los valores de "types".

Luego recién recorres con el map() a los valores ingresados, así:

const result = types.map(type => `<div>imagen: <img src="www.link.es/${type}"></div>`);

Ahora, recuerda que el map() devuelve un arreglo con lo recorrido (ahí el problema de las ,). Entonces, deberíamos convertirlos en una cadena de texto para hacer un innerHTML al div donde queremos mostrar los resultados, para esto utilicé join(''):

document.getElementById("imagenes").innerHTML = result.join('');

Código completo (explicación en comentarios):

let obj = {
  "types": [
    "Normal",
    "Flying"
  ]
}

// primero ingreso al valor de "types", que es un array => ["Normal", "Flying"].
const types = obj.types;

// mapeo sus valores y concateno cada valor con la cadena => <img src="www.link.es/${...}"></div>.
const result = types.map(type => `<div>imagen: <img src="www.link.es/${type}"></div>`);

console.log(result)

// Recuerda que map() devuelve un array, es por eso que se utilizó join() para devolver una cadena y no el array (por eso tenías las ",").
// Entonces, al ser ya una cadena, puedo hacer un innerHTML al div con el id "imagenes" sin problemas.
document.getElementById("imagenes").innerHTML = result.join('');
<div id="imagenes"></div>

1
  • 1
    Gracias, Cris lo tengo ahora mas claro.. ya logre solucionar...
    – GAEL VM
    el 20 feb. a las 0:03

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.