JavaScript Ya

Problemas
Codificar problema
Ejecución problema

PROBLEMA

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>
        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>

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

Retornar al menu