ES6 - API fetch (recuperar archivo de imágen)

PROBLEMA

  1. Mediante la dirección web:

    https://randomuser.me/api/
    

    Se nos retorna un objeto JSON con la información de un usuario.

    Recuperar mediante el API fetch los datos y mostrar el primer y segundo nombre.

    La estructura del archivo JSON es:

    {
      "results": [
        {
          "gender": "male",
          "name": {
            "title": "mr",
            "first": "brad",
            "last": "gibson"
          },
          "location": {
            "street": "9278 new road",
            "city": "kilcoole",
            "state": "waterford",
            "postcode": "93027",
            "coordinates": {
              "latitude": "20.9267",
              "longitude": "-7.9310"
            },
            "timezone": {
              "offset": "-3:30",
              "description": "Newfoundland"
            }
          },
          "email": "brad.gibson@example.com",
          "login": {
            "uuid": "155e77ee-ba6d-486f-95ce-0e0c0fb4b919",
            "username": "silverswan131",
            "password": "firewall",
            "salt": "TQA1Gz7x",
            "md5": "dc523cb313b63dfe5be2140b0c05b3bc",
            "sha1": "7a4aa07d1bedcc6bcf4b7f8856643492c191540d",
            "sha256": "74364e96174afa7d17ee52dd2c9c7a4651fe1254f471a78bda0190135dcd3480"
          },
          "dob": {
            "date": "1993-07-20T09:44:18.674Z",
            "age": 26
          },
          "registered": {
            "date": "2002-05-21T10:59:49.966Z",
            "age": 17
          },
          "phone": "011-962-7516",
          "cell": "081-454-0666",
          "id": {
            "name": "PPS",
            "value": "0390511T"
          },
          "picture": {
            "large": "https://randomuser.me/api/portraits/men/75.jpg",
            "medium": "https://randomuser.me/api/portraits/med/men/75.jpg",
            "thumbnail": "https://randomuser.me/api/portraits/thumb/men/75.jpg"
          },
          "nat": "IE"
        }
      ],
      "info": {
        "seed": "fea8be3e64777240",
        "results": 1,
        "page": 1,
        "version": "1.3"
      }
    }

Luego según el valor que almacena la propiedad "gender" que puede ser "male" o "female" proceder a recuperar nuevamente con el API fetch una imagen llamada 'hombre.png' o 'mujer.png', pero que se encuentra en nuestro servidor.

Mostrar entonces en la pagina el primer nombre, segundo nombre y la imagen respectiva. Hacer esto inmediatamente se carga la página web.

Tener en cuenta que dentro del método 'then' podemos hacer la llamada nuevamente al método 'fetch'.

Solución
<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>

<body>
  <p><strong>Nombre:</strong><span id="nombre"></span></p>
  <img id="foto">

  </div>
  <script>
    addEventListener("DOMContentLoaded", () => {
      fetch('https://randomuser.me/api/')
        .then(response => response.json())
        .then((datos) => {
          document.getElementById("nombre").innerText = datos.results[0].name.first
            + ', ' + datos.results[0].name.last;
          let imagen;
          if (datos.results[0].gender == "female")
            imagen = "mujer.png";
          else
            imagen = "hombre.png";
          fetch(imagen)
            .then(response => response.blob())
            .then(datos => document.getElementById("foto").setAttribute('src', URL.createObjectURL(datos)));
        })
    });

  </script>

</body>

</html>


Retornar al menu