Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Endpoints y query parameters

4/20
Recursos

Aportes 20

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Les dejo un mini resumen de los endpoints y query parameters
Una buena RESTful API que cumple con todos los constrainst de REST debería tener una clara documentación que especifique cada uno de los endpoints y query parameters disponibles para solicitar, editar, crear o eliminar recursos en el servidor
.

Recomiendo colcoar los query parameters en una variable de manera ordenada en un array:

querystring = [
    '?',
    'limit=3',
    '&order=Desc',
].join('');

const URL = `https://api.thecatapi.com/v1/images/search${querystring}`;

We can reduce the code usign getElementsByClass or Tag Name

const btn = document.querySelector('button');

async function callUrls() {
    const catUrlApi = "https://api.thecatapi.com/v1/images/search?limit=3";

    const response = await fetch(catUrlApi);
    const data = await response.json();
    const images = document.getElementsByTagName("img"); 

    const arrImages = [...images];
    arrImages.forEach((image, item) => {
        image.src = data[item].url;
    });
}

btn.addEventListener("click", callUrls);
window.onload = callUrls();

✌🏻😎

const API = 'https://api.thecatapi.com/v1/images/search?limit=3'

const fetch_api = async () => {

    const request = await fetch(API)
    const response = await request.json()
    const img = document.querySelectorAll('.img')
    img.forEach((image, index) => {

        img[index].src = response[index].url
    })
}

window.addEventListener('DOMContentLoaded', fetch_api)

const button = document.querySelector('button')

button.addEventListener('click', fetch_api)

Reto resuelto con perritos! 🐶

HTML

<!DOCTYPE html>
<html lang="en">
<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="./styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Square+Peg&display=swap" rel="stylesheet">
    <title>Random Dogs with API REST</title>
</head>
<body>
    <header>
        <h1>Random Dogs</h1>
    </header>
    <section class="container">
        <img id="img1" alt="Dog Random Picture" class="image">
        <img id="img2" alt="" class="image">
        <img id="img3" alt="" class="image">
    </section>
    <div class= "button-container">
        <button type="button" onclick="reload()" class="random-dog-button"> Random Dogs</button>
    </div>
    <script src="./main.js"></script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}
html {
    font-size: 62.5%;
}
body {
    font-family: 'Square Peg', cursive;
}
header {
    display: flex;
    justify-content: center;
}
h1 {
    font-size: 8rem;   
}
.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    place-items: center;
    padding: 20px;
}
.container .image {
    border-radius: 20px;
    margin: 5px;
    width: 300px;
    height: 300px;
}
.button-container {
    display: flex;
    place-content: center;
}
.random-dog-button {
    background-color: rgb(228, 164, 94);
    border: 5px solid rgb(249, 151, 66);
    border-radius: 15px;
    cursor: pointer;
    font-family: 'Pacifico', cursive;
    font-size: 2rem;
    padding: 12px;
    width: 200px;
    height: auto;
}
.random-dog-button:hover {
    border: 5px solid rgb(228, 164, 94);
    background-color: rgb(227, 141, 67);
}

JS

const API_URL = "https://api.thedogapi.com/v1/images/search?limit=3";


async function reload() {
    const res = await fetch(API_URL)
    const data = await res.json()
    console.log(data)
    const img1 = document.getElementById('img1');
    const img2 = document.getElementById('img2'); 
    const img3 = document.getElementById('img3');
    //img.src = data[0].url;
    img1.src = data[0].url;
    img2.src = data[1].url;
    img3.src = data[2].url;
}
reload();

Mi solución.
No use IDs en las imagenes. Solo la misma clase para usar en CSS

function recargar(url_fetch){
fetch(url_fetch)
    .then(res => res.json())
    .then(data => {
        const img=document.querySelectorAll('img');
        for (let i = 0; i < 3; i++) {
            img[i].src= data[i].url;
            console.log(data[i].url);
        }
    });
}

Lógica de una loading en nuestra página 🔃

Ingresamos nuestro loader antes de nuestra imagen en el archivo .html y le damos una clase ‘hide’.

<body>
    <div id="app">
      <p id="loader" class="hide">Cargando imagen</p>
      <img width="400" id="img" alt="Foto de perro" />
      <button onclick="getImageDog()">Recargar</button>
    </div>
    <script src="index.js"></script>
  </body>

Ahora definimos nuestra clase en el archivo .css que crearemos previamente. De la siguiente manera:

.hide {
  display: none;
}

Ahora en JavaScript, cada que le demos al botón, mostrará nuestro loader en lo que cargue la imagen, para saber que algo está sucediendo.

const API_URL = "https://api.thedogapi.com/v1/images/search";

const img = document.getElementById("img");
const loader = document.getElementById("loader");

const getImageDog = async () => {
  showOrHide(img, loader);
  const data = await (await fetch(API_URL)).json();
  showOrHide(img, loader);
  img.src = data[0].url;
};

function showOrHide(elementHide, elementoShow) {
  elementHide.classList.toggle("hide");
  elementoShow.classList.toggle("hide");
}

getImageDog();

Recuerda que tu loader puede ser una animación, un progress bar, un skeleton, etc. Eso dependerá de tu imaginación. Utilicé el párrafo para fines explicativos. Saludos 💚

¿Qué es un Endpoint de una API?


Un endpoint de API es un punto en el que una API, el código que permite que dos programas de software se comuniquen entre sí, se conecta con el programa de software. Las API funcionan enviando solicitudes  de información desde una aplicación web o un servidor web y recibiendo una respuesta .

En otras palabras, los endpoints de API son la ubicación digital específica donde un programa envía solicitudes de información para recuperar el recurso digital que existe allí. Los endpoints especifican dónde las API pueden acceder a los recursos y ayudan a garantizar el correcto funcionamiento del software incorporado. El rendimiento de una API depende de su capacidad para comunicarse correctamente con los puntos finales de la API.

Los programas de software suelen tener endpoints. Por ejemplo, en Instagram incluyen uno que permite a las empresas y los creadores medir las interacciones de medios y perfiles; uno que les permita moderar los comentarios y sus respuestas; y una tercera que les permite descubrir medios etiquetados.

Query params


El query param es la clave valor name=oscar que vemos al final de la URL, y como regla, siempre deberán estar después del símbolo de interrogación. Además, una URL puede tener N query params, cómo el siguiente ejemplo:

https://myapi.com/customers?firstname=oscar&lastname=blancarte&status=active

Esta URL la podemos utilizar para buscar a todos los clientes donde su nombre es oscar, su apellido es blancarte y su estatus es activo. Cuando utilizamos más de un Query param, es importante separar cada uno mediante el simbolo &.

Cambie un poco la funcionalidad.

Esta es mi pequeña implementación usando JS para hacer integración con el usuario😊



hay vamos probando, la hice con cinco y si me salio que bueno es cuando si te sale… esta básico pero me gusta.

El código mas factorizado

const img = document.querySelectorAll("img");
const btn = document.querySelector("button");
const getCatImg = async () => {
  const res = await fetch(API_URL);
  const data = await res.json();
  img.forEach((item, index) => {
    item.src = data[index].url;
  });
};
getCatImg();
btn.addEventListener("click", getCatImg);

Mi solución

HTML

<body>
    <h1 class="title">Consumiendo mi primera API</h1>
    <button  onclick="getCat()">Click me</button>
    <div class="img_container">
        <div id="img"> </div>
        <div id="img"> </div>
        <div id="img"> </div>
    </div>
    <script src="./src/main.js"></script>
</body>

JS

const API_URL = "https://api.thecatapi.com/v1/images/search?limit=3";

async function getCat(){
    const res = await fetch(API_URL);
    const data = await res.json();
    const urlImg = data[0].url;
    // const imgs = document.querySelectorAll('#img').style.backgroundImage = `url(${data[0].url})`;
    const imgs = document.querySelectorAll('#img');
    imgs.forEach((image, item)=>{
        image.style.backgroundImage = `url(${data[item].url})`
    });
}
getCat();

Así va mi proyecto al momento 😀

.

HTML

<!DOCTYPE html>
<html lang="en">
  <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" />
    <title>Perritos aleatorios</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected];300;400;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>Perritos aleatorios</h1>
    <div class="cards__container">
      <section class="card">
        <p class="card__title" id="title"></p>
        <img id="img1" class="card__img" alt="Foto perrito aleatorio" />
        <div class="card__info">
          <p class="weight" id="weight"></p>
          <p class="height" id="height"></p>
          <p class="life-span" id="lifeSpan"></p>
        </div>
      </section>
      <section class="card">
        <p class="card__title" id="title"></p>
        <img id="img2" class="card__img" alt="Foto perrito aleatorio" />
        <div class="card__info">
          <p class="weight" id="weight"></p>
          <p class="height" id="height"></p>
          <p class="life-span" id="lifeSpan"></p>
        </div>
      </section>
      <section class="card">
        <p class="card__title" id="title"></p>
        <img id="img3" class="card__img" alt="Foto perrito aleatorio" />
        <div class="card__info">
          <p class="weight" id="weight"></p>
          <p class="height" id="height"></p>
          <p class="life-span" id="lifeSpan"></p>
        </div>
      </section>
    </div>
    <button id="button">¡Ver más perros!</button>
    <script src="./main.js"></script>
  </body>
</html>

JS

const API_URL = "https://api.thedogapi.com/v1/images/search?limit=3";
const images = document.getElementsByTagName("img");
const titles = document.getElementsByClassName("card__title");
const weights = document.getElementsByClassName("weight");
const heights = document.getElementsByClassName("height");
const lifeSpan = document.getElementsByClassName("life-span");
const button = document.getElementById("button");

async function getDogs() {
  const res = await fetch(API_URL);
  const data = await res.json();
  for (let i = 0; i < data.length; i++) {
    images[i].src = data[i].url;
    if (data[i].breeds[0]) {
      titles[i].innerText = data[i].breeds[0].name;
      weights[i].innerText = "Peso: " + data[i].breeds[0].weight.metric + " kg";
      heights[i].innerText =
        "Altura: " + data[i].breeds[0].height.metric + " cm";
      lifeSpan[i].innerText =
        "Esperanza de vida: " + data[i].breeds[0].life_span;
    } else {
      titles[i].innerText = "Sin información";
      weights[i].innerText = "Peso: Sin información";
      heights[i].innerText = "Altura: Sin información";
      lifeSpan[i].innerText = "Esperanza de vida: Sin información";
    }
  }
}

button.onclick = getDogs;

getDogs();

Asi va mi codigo, aunque no se si es necesario utilzar el try y el catch

const URL = "https://api.thecatapi.com/v1/images/search?limit=4";
const htmlImages = document.getElementsByClassName("cat");
const imgs = [...htmlImages];
const fetchData = async () => {
   try{
      const response = await fetch(URL);
      const data = await response.json(); 
      imgs.forEach((img, index) => {
         img.src = data[index].url;
      })
   }catch(error){
      console.error(error);
   }
};
document.addEventListener("DOMContentLoaded", fetchData);
const button = document.getElementById("reload");
button.addEventListener("click", fetchData);

Hice el código del profesor, pero en Typescript y usando foreach para colocar el url en cada etiqueta img.

import { Cat } from "./../../models/cat.model";

const URL: string = "https://api.thecatapi.com/v1/images/search?limit=5";
const images: NodeListOf<HTMLImageElement> = document.querySelectorAll("img");
const button: HTMLElement | null = document.getElementById("boton");



async function updateImages (): Promise<void> {
  const res: Response = await fetch(URL);
  const data: Cat[] = await res.json();

  images.forEach((image: HTMLImageElement, index: number) => {
    image.src = data[index].url;
  });
};

updateImages();

if (button!== null) {
  button.onclick = updateImages;
}

Reto con perritos 🐶🐶

HTML


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Dogs</title>
  <link rel="stylesheet" href="./main.css">
</head>
<body>
  <h1>Random Dogs</h1>
  <div class="img-container">

  </div>
  <button type="button" class="button">Reset</button>

  <script src="./main.js"></script>
</body>
</html>

CSS


h1 {
  text-align: center;
}

.img-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  width: 600px;
  margin: 0 auto;
  margin-bottom: 10px;
  gap: 10px;
}

.img-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.button {
  display: block;
  margin: 0 auto;
  width: 400px;
  border-radius: 5px;
  padding: 5px;
  font-size: 20px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  font-weight: bold;
  cursor: pointer;
}
.button:hover {
  opacity: 0.8;
}

JavaScript


const button = document.querySelector('.button');

const reload = async () => {
  const API_URL = 'https://api.thedogapi.com/v1/images/search?limit=6';
  const res = await fetch(API_URL);
  const data = await res.json();

  const imgContainer = document.querySelector(".img-container"); 
  
  imgContainer.innerHTML = ""
  
  data.map(img => {
    imgContainer.insertAdjacentHTML('afterbegin', `<img id="${img.id}" src="${img.url}">`)
  })

};
reload();

button.addEventListener("click", () => {
  reload();
});  

El comando de VSC para tener multiples cursores al mismo tiempo es:
Multiples cursores hacia arriba

Ctrl + Shift + ↑

Multiples cursores hacia abajo

Ctrl + Shift + 	↓