0

button.addEventListener('click', () => {
    axios({
        method: 'GET',
        url: 'https://api.got.show/api/show/characters'
    }).then(res => {
        const list = document.getElementById('list')
        const fragment = document.createDocumentFragment()
        for (const userInfo of res.data) {
            const listItem = document.createElement('LI')
            listItem.textContent = `Ser ${userInfo.name} de la casa ${userInfo.house} y soy el ${userInfo.titles} `
            fragment.appendChild(listItem)
        }
        list.appendChild(fragment)
    }).catch(err => console.log(err))
})
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <title>axios</title>
</head>

<body>
  <h1 id="title">Axios - Get</h1>
  <button id="button">Get Data</button>
  <ul id="list"></ul>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://api.got.show/api/show/characters"></script>
  <script src="Api.js"></script>
</body>

</html>

** Crear un script que consuma La Api https://api.got.show/api/

Quiero Listar 10 personajes aleatorios con los campos Titulo, Nombre y casa.

hasta ahora tengo esto y no se como seleccionar solo 10 personajes aleatorios, ya que si ejecuto me salen todos los personajes en un lista

quería integrar un for(var i = 0;i<10 i++)asi para que repita 10 veces el array y cambiar donde dice res.data[i] por res.data[Math.Random()], pero nose como integrarlo

3

2 respuestas 2

2

Puedes almacenar todos los datos que recibes de la api y vas tomando un dato aleatorio dentro de todos mientras eliminas el que tomas para no repetirlo.

la variable temporal almacena todos los datos, de la cual se toma un dato aleatorio definido por index = Math.floor(Math.random() * temporal.length), con let [userInfo] = temporal.splice(index, 1); tomas un dato y lo quitas de la lista temporal, todo esto mientras el tamaño de fragment sea menor a 10, siempre y cuando exista un elemento en temporal: while (fragment.childElementCount < 10 & temporal.length > 0).

button.addEventListener('click', () => {
  axios({
    method: 'GET',
    url: 'https://api.got.show/api/show/characters'
  }).then(res => {
    const list = document.getElementById('list')
    const fragment = document.createDocumentFragment()
    let temporal = res.data
    while (fragment.childElementCount < 10 & temporal.length > 0) {
      index = Math.floor(Math.random() * temporal.length)
      let [userInfo] = temporal.splice(index, 1);
      const listItem = document.createElement('LI')
      listItem.textContent = `Ser ${userInfo.name} de la casa ${userInfo.house} y soy el ${userInfo.titles} `
      fragment.appendChild(listItem)
    }
    list.appendChild(fragment)
  }).catch(err => console.log(err))
})
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <title>axios</title>
</head>

<body>
  <h1 id="title">Axios - Get</h1>
  <button id="button">Get Data</button>
  <ul id="list"></ul>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://api.got.show/api/show/characters"></script>
  <script src="Api.js"></script>
</body>

</html>

1

Esto te podría servir como ejemplo, en cada iteración del for (en este caso 10), trae del array obtenido en la llamada el name de uno de ellos aleatorio, cambiando la posición con un aleatorio entre 0 y el length del array - 1, ya que el array comienza en 0 (en este caso el length es 218).

fetch('https://api.got.show/api/show/characters')
  .then(response => response.json())
  .then(data => { 
      for (let i = 0; i < 10; i++) {
          console.log(data[Math.round(Math.random()*data.length-1)].name)        
      };
    })

En tu caso quedaría algo así:

button.addEventListener('click', () => {
    axios({
        method: 'GET',
        url: 'https://api.got.show/api/show/characters'
    }).then(res => {
        const list = document.getElementById('list')
        const fragment = document.createDocumentFragment()
        for (let i = 0; i < 10; i++) {
            const userInfo = res.data[Math.round(Math.random()* res.data.length-1)]
            const listItem = document.createElement('LI')
            listItem.textContent = `Ser ${userInfo.name} de la casa ${userInfo.house} y soy el ${userInfo.titles} `
            fragment.appendChild(listItem)
        }
        list.appendChild(fragment)
    }).catch(err => console.log(err))
})`introducir el código aquí`

Cuidado por Titles a veces es una lista, ahí tendrías que volver a recorrer y decidir que hacer con eso. O podrías traer un único elemento pasandole la posición del array, eso depende de ti. También noté que "home" a veces está undefined.

Para agregar imágenes es un poco complicado porque el image que trae no es la ruta a un archivo, sino una herramienta para reducir el tamaño, para obtener un archivo lo que hice es convertir la ruta en un array con un split y usar como separador el string "/revision", entonces todo lo que está antes que es la ruta a la imágen queda en la posición 0 de ese array, una vez obtenido eso hago una new imagen y la agrego al fragment. Quedaría algo así el Script:

button.addEventListener("click", () => {
  axios({
    method: "GET",
    url: "https://api.got.show/api/show/characters",
  })
    .then((res) => {
      const list = document.getElementById("list");
      const fragment = document.createDocumentFragment();
      for (let i = 0; i < 10; i++) {
        const userInfo =
          res.data[Math.round(Math.random() * res.data.length - 1)];
        const listItem = document.createElement("LI");
        listItem.textContent = `Ser ${userInfo.name} de la casa ${userInfo.house} y soy el ${userInfo.titles} `;
        const img = new Image();
        img.src =
          userInfo.image.split(
            "/revision"
          )[0];
        img.className="apiImages"
        fragment.appendChild(listItem);
        fragment.appendChild(img);
      }
      list.appendChild(fragment);
    })
    .catch((err) => console.log(err));
})`introducir el código aquí`;

Después por CSS le das el tamaño a mostrar deseado a cada imagen Podría ser en CSS algo así, puedes agregarle una clase al crearlas para que

.apiImages {
    width: 150px;
}
2
  • amigo y para colocarle alguna imagen como seria
    – Detriox
    el 24 dic. 2021 a las 4:11
  • 1
    Es un poco complejo porque la ruta no es a un jpg o png, sino a una herramienta para reducir el tamaño de la imágen, pero podemos sacar una parte de la ruta y obtener la imagen, te dejé ejemplo en la respuesta actualizada, favor si es solución a tu problema marcar como solución dandole al visto al costado de la respuesta. Gracias! el 24 dic. 2021 a las 5:05

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.