2

Tengo 2 inquietudes espero me puedan apoyar:

Tengo los siguentes datos en mi Json:

{
    "name": "Budew",
    "eggType": "2 km",
    "isAdventureSync": false,
    "image": "/pokemon_icon_406_00.png",
    "canBeShiny": true,
    "combatPower": {
        "min": 448,
        "max": 489
    },
    "isRegional": false
},

Este es mi código con el que recojo datos y muestro en html:

document.querySelector('.response').innerHTML = 'Un momento, por favor...';
const request = new XMLHttpRequest();
const url = 'https://raw.githubusercontent.com/bigfoott/ScrapedDuck/data/eggs.json';
request.open("GET", url);
request.send();

request.onreadystatechange = (e) => {
    if (request.readyState == 4 && request.status == 200) {
        const posts = JSON.parse(request.responseText);
        let html = '<ul class="egg-list-flex">';
        posts.forEach(function (post, index) {
            console.log(`${index} : ${post.name}`);
            html += `<li class="egg-list-item">
                    <div class="egg-list-img egg2km">
                    <img src="${post.image}"></div>
                    <img class="shiny-icon" src="./${post.canBeShiny}.png" alt="shiny">
                    <span class="hatch-pkmn">${post.name}</span>
                    <br>
                    <div class="font-size-smaller color-555555">
                    <span class="font-size-x-small">CP ${post.combatPower.min} - ${post.combatPower.max}</span>
                    </div>
                </li>`;
        });
        html += '</ul>';
        document.querySelector('.response').innerHTML = html;
    }
}
<div class="response"></div>

Me gustaría mostrar una imagen src="./${post.canBeShiny}.png" según el resultado que obtenga: (true o false) en el json "canBeShiny": true.

Lo otro es agruparlos, segun: "eggType": "2 km", de 5 y 10; y mostrar en mi html agrupados.

Este es mi resultado actual de html:

Este es mi resultado en html:

lo que necesito es agruparlos:

algo asi

agruparlos según resultados de mi jquery ( "eggType": "2 km" ) y mostrar las estrellas en la parte superior derecha según ("canBeShiny": true,)

2
  • 1
    y que has intentado? recuerda que toda pregunta debe tener una demostracion de esfuerzo, osea un ejemplo mínimo verificable
    – David081
    el 19 dic. 2022 a las 18:44
  • ademas la explicacion de lo que buscas es bastante mala, intenta detallar tu problema y lo que buscas mejor el 19 dic. 2022 a las 19:40

1 respuesta 1

2

Primero no uso un <ul> para todos los pokemones sino que uso un <ul> para cada categoría y antes de ellos agrego las cabeceras "2km eggs", "5kmeggs" y "10kmeggs" con un <h1> y una línea con <hr>. Después uso el operador ternario para si isShiny == true coloque la imagen shiny.jgp, de lo contrario agrego una imagen de 1x1 pixeles transparente. Uso insertAdjacentHTML("beforeend",) para agregar los pokemones en la lista de su categoría, justo antes de su ultimo nodo hijo.

document.querySelector('.response').innerHTML += 'Un momento, por favor...';
const request = new XMLHttpRequest();
const url = 'https://raw.githubusercontent.com/bigfoott/ScrapedDuck/data/eggs.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.eggType == "2 km") {
        // despues del ultimo hijo del <ul "2kmegg"></ul> agrego el siguiente fragmento de documento
        document.getElementById("2kmeggs").insertAdjacentHTML("beforeend", `
        <li class="egg-list-item">
          <div class="egg-list-img egg2km">
          <img src="${post.image}"></div>
          <img class="shiny-icon" src=${post.canBeShiny ? "./pokeimg/shiny.jpg" : ""} alt="shiny"> <!-- Uso del operador ternario! -->
          <span class="hatch-pkmn">${post.name}</span>
          <br>
          <div class="font-size-smaller color-555555">
          <span class="font-size-x-small">CP ${post.combatPower.min} - ${post.combatPower.max}</span>
          </div>
        </li>`
        );
      }
      if (post.eggType == "5 km") {
        document.getElementById("5kmeggs").insertAdjacentHTML("beforeend", `
        <li class="egg-list-item">
          <div class="egg-list-img egg2km">
          <img src="${post.image}"></div>
          <img class="shiny-icon" src=${post.canBeShiny ? "./pokeimg/shiny.jpg" : ""} alt="shiny">
          <span class="hatch-pkmn">${post.name}</span>
          <br>
          <div class="font-size-smaller color-555555">
          <span class="font-size-x-small">CP ${post.combatPower.min} - ${post.combatPower.max}</span>
          </div>
        </li>`
        );
      } 
      if (post.eggType == "10 km") {  
        document.getElementById("10kmeggs").insertAdjacentHTML("beforeend", ` /
        <li class="egg-list-item">
          <div class="egg-list-img egg2km">
          <img src="${post.image}"></div>
          <img class="shiny-icon" src=${post.canBeShiny ? "./pokeimg/shiny.jpg" : "./pokeimg/noShiny.png"} alt="shiny">
          <span class="hatch-pkmn">${post.name}</span>
          <br>
          <div class="font-size-smaller color-555555">
          <span class="font-size-x-small">CP ${post.combatPower.min} - ${post.combatPower.max}</span>
          </div>
        </li>`
        );
      }
    });
  }
}
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="normalize.css">
</head>
<body>

  <div class="response">
    <h1>2km eggs</h1>
    <ul id="2kmeggs"></ul>
    <hr>
    <h1>5km eggs</h1>
    <ul id="5kmeggs"></ul>
    <hr>
    <h1>10km eggs</h1>
    <ul id="10kmeggs"></ul>
  </div>

  <script src="scripts2.js" defer></script>
</body>
</html>

La imagen del shiny funciona solo que como te imaginaras, la imagen esta en mi equipo y no se como importarlo aca. Pero si lo copias y pegas en tu IDE funciona siempre y cuando pongas la ruta que desees.

1
  • Gracias, voy a estudiar bien tu codigo. Muy agradecido
    – GAEL VM
    el 20 dic. 2022 a las 0:50

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.