ES6 - API fetch (consumir API públicas)

PROBLEMAS

  1. Mediante la dirección web:

    https://freegeoip.app/json/
    

    freegeoip.app nos proporciona una API de geolocalización IP. Utiliza una base de datos de direcciones IP asociadas a ciudades junto con otra información relevante como zona horaria, latitud y longitud.

    La estructura del archivo JSON es:

    {
      "ip":"186.123.122.56",
      "country_code":"AR",
      "country_name":"Argentina",
      "region_code":"X",
      "region_name":"Córdoba",
      "city":"Córdoba",
      "zip_code":"5000",
      "time_zone":"America/Argentina/Cordoba",
      "latitude":-31.4015,
      "longitude":-64.1803,
      "metro_code":0}
    

    Mostrar en la página el nombre del país, ciudad, código postal e ip.

  2. Mediante la dirección web:

    https://jsonplaceholder.typicode.com/users?id=[número de 1 a 10]
    

    Recuperamos los datos de un usuario en particular. Ingresar en un formulario el id de un usuario y al presionar un botón mostrar los datos del mismo.

    La estructura del archivo JSON es:

    [
      {
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "Sincere@april.biz",
        "address": {
          "street": "Kulas Light",
          "suite": "Apt. 556",
          "city": "Gwenborough",
          "zipcode": "92998-3874",
          "geo": {
            "lat": "-37.3159",
            "lng": "81.1496"
          }
        },
        "phone": "1-770-736-8031 x56442",
        "website": "hildegard.org",
        "company": {
          "name": "Romaguera-Crona",
          "catchPhrase": "Multi-layered client-server neural-net",
          "bs": "harness real-time e-markets"
        }
      }
    ]
    
Solución
Problema 1.

<!DOCTYPE html>
<html>

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

<body>
  <div id="informacion">

  </div>

  <script>
    addEventListener("DOMContentLoaded", () => {
      fetch("https://freegeoip.app/json/")
        .then(response => response.json())
        .then(datos => {
          document.getElementById("informacion").innerHTML = 
            `<p>Pais:${datos.country_name}</p>
             <p>Ciudad:${datos.city}</p>
             <p>Código postal:${datos.zip_code}</p>
             <p>Ip:${datos.ip}</p>`;
        });
    });
  </script>

</body>

</html>


Problema 2.

<!DOCTYPE html>
<html>

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

<body>
  <p>Ingrese el id de un usuario(entre 1 y 10):
    <input type="number" id="usuario">
  </p>
  <p><button id="buscar">Buscar</button></p>
  <div id="informacion">

  </div>

  <script>
    addEventListener("DOMContentLoaded", () => {
      document.getElementById("buscar").addEventListener("click", () => {
        fetch("https://jsonplaceholder.typicode.com/users?id=" + document.getElementById("usuario").value)
          .then(response => response.json())
          .then(datos => {
            if (datos.length == 1)
              document.getElementById("informacion").innerHTML =
                `<p>Nombre:${datos[0].name}</p>
             <p>Ciudad:${datos[0].email}</p>
             <p>Teléfono:${datos[0].phone}</p>`;
            else
              document.getElementById("informacion").innerHTML = 'No existe el usuario con id=' +
                document.getElementById("usuario").value;

          });
      });
    });
  </script>

</body>

</html>


Retornar al menu