Manipulación dinámica del DOM con datos de API REST

Clase 11 de 20 • Curso de API REST con Javascript: Fundamentos

Resumen

La manipulación dinámica del DOM con datos provenientes de una API REST es una habilidad fundamental para quienes buscan construir aplicaciones web interactivas y personalizadas. Aquí verás cómo implementar este proceso, manejar métodos HTTP como GET y POST, y adaptar tu código para gestionar favoritos de manera eficiente en JavaScript.

¿Qué es una API REST y cómo se consumen datos con métodos HTTP?

Para recibir y mostrar información dinámicamente en una web, primero necesitas consumir una API REST utilizando métodos HTTP, como GET y POST.

El método GET se utiliza por defecto con fetch para solicitar datos.
Otros métodos importantes son POST, PUT, PATCH y DELETE.
Al usar POST, debes enviar un body (cuerpo) en formato JSON, lo que requiere emplear JSON.stringify para que el backend y frontend se comuniquen correctamente.
Además, debes especificar en los headers que el contenido es de tipo JSON para una correcta interpretación.

¿Cómo manipular el DOM dinámicamente con base en respuestas de la API?

El reto es mostrar en el HTML los datos que devuelve la API. Aquí, la clave es crear elementos HTML de manera dinámica según la información de cada respuesta:

Utiliza document.createElement para generar nodos como article, img y button por cada elemento recibido (por ejemplo, cada gato favorito).
Asigna las propiedades y contenido necesarios a estos nodos, como la URL de la imagen o el texto del botón.
Emplea appendChild para insertar los nuevos elementos en el contenedor correspondiente del DOM.
Si ocurre un error durante el request a la API, muestra el mensaje de error dinámicamente usando elementos de HTML ya seleccionados.
Ajusta propiedades visuales como el width de las imágenes directamente desde JavaScript para mantener la presentación bajo control temporalmente.

¿Cómo gestionar favoritos en la aplicación y actualizar interactivamente?

Para que los usuarios puedan agregar distintos favoritos y verlos reflejados de inmediato:

Cambia la función que guarda favoritos para que acepte un ID como argumento y así guardar cada imagen individualmente, evitando duplicar el mismo favorito.
Asigna dinámicamente el evento onClick a cada botón mediante JavaScript, asegurando que cada uno guarde el favorito correcto utilizando la función y el ID del gato seleccionado.
Utiliza una arrow function para enlazar el evento sin ejecutar la función antes de tiempo.
Cuando se agregan favoritos, refresca visualmente la sección de favoritos en el DOM para mostrar el nuevo contenido.
Si necesitas limpiar elementos o corregir errores como IDs inválidos, revisa cuidadosamente la correspondencia entre los selectores y elementos reales en tu HTML.
Puedes limitar el tamaño de las imágenes manipulando atributos como width.

Los ejemplos y pruebas demuestran cómo adaptar el código para crear experiencias personalizadas a partir de fuentes externas, incrementando el interés y motivando continuidad. Si tienes experiencias o dudas sobre la integración de APIs REST y manipulación dinámica con JavaScript, ¡compártelas en los comentarios!

John Orellana

student•

una cosita si uds al momento de darle clic a los botones de agregar a Favorito y no les agrega pa´nada, verifiquen que no tengan el End Poin de limit=2, si no puede acumular una basta cantidad de Michis al momento que lo quiten 😄

Fabricio González Guasque

student•

Me habría venido bien el comentario en la clase anterior jaja

Diana Gonzalez

student•

Graciass!!!

LUZ ADRIANA MARTINEZ RAMIREZ

student•

Para evitar hardcodear todos los botones, cree listas de los botones, guardo datos entre nodos para leerlos y asi tener funciones mas genericas.

sobre este ciclo coloco los datos sobre el elemento padre entre los atributos.

En esta imagen coloco un evento sobre todos los botones de los michis random, luego en el mismo ciclo determino cual fue el elemento del evento y obtengo de su padre el id del michi a guardar

Eduardo Peña Ramos

student•

Me gusta el tema de tu editor porque lleva cursivas, ¿cuál es?

Carlos Romero

student•

Muchas gracias, me funciono de 10!

Nicolás Arévalo

student•

Para entender mejor el problema del minuto 18:40: Cuando le asignamos a

btn.onclick = mifuncion()

lo que hacemos es asignarle el resultado de nuestra función; básicamente le estamos diciendo "Te asignaré lo que resulte si ejecutamos mifuncion()", por eso era que siempre se guardaban en favoritos. Cuando lo envolvemos en una función anónima (cuando haces () => {}, es anónima porque es realmente una función como esta: function mifuncion(){}, solo que sin un nombre) lo que hacemos es que el propio onclick sea una función (que solo se ejecutará cuando sea llamada). De hecho, si luego de hacer lo que JuanDa hizo:

btn.onclick = () => funcion()

hacemos

btn.onclick()

La función se va a ejecutar de igual manera, como si hicieras

btn.onclick =  funcion()

Stephany Plaza

student•

gracias por la explicación :)

Jorge Luis Rueda Marin

student•

Muchas gracias por tu explicación.

Alejandro Forero Vanegas

student•

Hola, ahí va mi progreso. Lo que hago es agregar caninos dinamicamente y el corazon es para agregarlos a la lista de favoritos

Lucia Dias

student•

Les comparto otra manera de añadir los michis al DOM!

Ederson Felipe Lopez Bolivar

student•

tu forma es válida pero tiene problemas de seguridad, no está mal si estás empezando pero la forma en la que la hacen en la clase es un poco más segura

Lucia Dias

student•

¿Por qué tiene problemas de seguridad? ¿Por qué la otra es más segura? 🤔

John Orellana

student•

const API_URL_FAVOTITES = 'https://api.thecatapi.com/v1/favourites?api_key=c08d415f-dea7-4a38-bb28-7b2188202e46'; para favoritos sin (limit=2) OJO

moises david castro martinez

student•

Esa era mi error, xd, gracias por el aporte compañero.

Federico Maidana

student•

Me sale ese error y creo que se porque sucede. Al parecer en la sección de favoritos a las imágenes no les aparece la url. Alguien sabría decirme por que ?

Este es mi código

Judit Palacios Gómez

student•

me sale exactamente el mismo problema, por alguna razon, la propiedad url simplemente no aparece : /

Samuel Sebastian Rosalini

student•

Me pasa exactamente lo mismo. Si se ven las url de los perros aleatorios pero al guardarlos como favorito me agregar al array esa info pero sin la url

Carlos Andrés Norato Gómez

student•

Amee las reacciones que tiene Juan DC cuando miraba un gatito Jajajaj

Diana Florez

student•

Siiii total ... esta clases estan geniales !!!

Aldahir Zamora

student•

Yo no termine de entender porque el profesor hizo el cambio de:

btn1.onclick = saveFavouritesDogs(data[0].id);
btn2.onclick = saveFavouritesDogs(data[1].id);

A agregar una función de flecha:

btn1.onclick = () => saveFavouritesDogs(data[0].id);
btn2.onclick = () => saveFavouritesDogs(data[1].id);

. . ¿Que es lo que esta haciendo esto realmente?

Juan Castro

teacher•

Imagina que lo único que hace JavaScript cuando sucede el evento de onclick es ponerle paréntesis a lo que quieres que se ejecute.

Es decir, si tines esta línea:

btn1.onclick = saveFavouritesDogs(data[0].id);

Cuando JavaScript escuche el click de los usuarios va a hacer esto:

btn1.onclick = saveFavouritesDogs(data[0].id)(); ???

Evidentemente mal. Por eso tenemos que envolver es código dentro de otra función para que cuando JavaScript la mande a llamar ("poner los paréntesis"), se ejecute ahora sí se código:

btn1.onclick = () => saveFavouritesDogs(data[0].id);
btn1.onclick = (() => saveFavouritesDogs(data[0].id))();

En otras palabras, necesitamos envolver esa parte del código en una función para que tu código NO se ejecute inmediatamente JavaScript lea esa línea de código, sino que espere a que los usuarios den click para ahora sí ejecutar la acción.

Ali Norberto Paredes Ramirez

student•

Duré horas tratando de debuggear un error en mi código al agregar nuevas mascotas al favorito, despeje un rato la mente y luego pude solucionarlo 🚀

Ricardo Alfonso Chavez Vilcapoma

student•

Mi avance...demoré un poco pero me sorprende lo mágico que se puede hacer con solo JavaScript puro...ya quisero aprender REACT ❤

Rubén Cuello

student•

Imposible sacarlo de favoritos a ese Michi :smile:

Oscar Antonio Espinoza Soto

student•

Hola, quizás estarás pensando que es un poco tedioso tener que declarar cada imagen con id e igual que los botones si por ejemplo, queremos tener 10 imágenes... Para eso podemos realizar un código parecido al cargar la sección de favorito, con la diferencia que al button le vamos agregar un addEventListener de ‘click’ y hacemos el llamado a la función de salvar en favoritos, para poder pasar el ID de la imagen utilizamos la el método bind

Dejo la imagen de ejemplo, en mi caso estoy con la API de perritos

async function loadRandomDog() {
    const response = await fetch(URL_RANDOM)
    const data = await response.json();
    const randomSection = document.querySelector('#randomDogs');

    if(response.status !== 200) {
        spanErro.innerHTML = "Hubo un error: " + response.status;
    } else {

        data.forEach(dog => {
            const article = document.createElement('article');
            const img = document.createElement('img')
            const button = document.createElement('button')
            const btnText = document.createTextNode('Guardar en Favoritos')
            img.src = dog.url;

            button.addEventListener('click', saveFavoritesDog.bind('idDog',dog.id))
            button.appendChild(btnText);
            article.appendChild(img);
            article.appendChild(button);
            
            randomSection.appendChild(article);
        });
    }
}

Espero que les funcione e igual recibir mejoras para este código

Juan Sebastian Espínola

student•

:clap: Que bien utilizado Me gustaría agregar únicamente como recomendación no insertar en cada loop el article al elemento randomSection, ya que si nuestro array tiene muchos elementos, eso significaría actualizar el DOM muchas veces. Una buena solución a eso podría ser usar Document Fragment:

const randomSection = document.querySelector('#randomDogs');
const fragment = new DocumentFragment(); // esto

data.forEach(dog => {
  const article = document.createElement('article');
  const img = document.createElement('img');
  const button = document.createElement('button');
  const btnText = document.createTextNode('Guardar en Favoritos');
  img.src = dog.url;

  button.addEventListener('click', saveFavoritesDog.bind('idDog', dog.id))
  button.appendChild(btnText)
  article.appendChild(img)
  article.appendChild(button)

  fragment.appendChild(article)
})
randomSection.appendChild(fragment) // aquí lo agregamos una vez

Esto va a insertar el elemento fragment con todos los article dentro y el renderizado se hará una sola vez, esto podría ser una gran ventaja en rendimiento si nuestra página crece.

Julian Franco

student•

También tener en cuenta que cada que va a generar un nuevo cat si tiene el botón de generate te va a agregar todo el contenido en la misma sección si hacer un reload.

Matias Martel

student•

Esta clase es excelente por todas las posibilidades que te otorga a la hora de jugar con descubrir que puede hacer uno al crear html dinamico. Yo probe una alternativa previo a ver esta clase en la cual en vez de seguir usando el onClick pase a asignarle un eventListener a cada uno de los buttons y quedo de esta forma:

//Realiza un fetch y provee una imagen aleatoria de un gatito, una vez obtenida la asigna al elemento image por medio de su src, ademas usa randomCatName para asignarle un nombre
async function loadRandomMichis() {
        const res = await fetch(`${randomAPI}${queryLimit}&${key}${keyAPI}`);
        const data = await res.json();

        console.log({name: "random",datos: data})
        if (res.status !== 200) {
            spanError.innerHTML = `Hubo un error ${res.status}`
        } else {
        // Traemos el container con el que estamos trabajando
        const container = document.getElementById('random-cats');

        //Generamos nombres aleatorios provenientes de un array para el numero de imagenes con el que estemos trabajando
        const title = document.getElementById('cat-title');
        let titleContent = "";
        for (let i = 1; i <= data.length; i++) {
            let catName = randomCatName(catNames);
            while (titleContent.includes(catName)) {
                catName = randomCatName(catNames);
            }
            if (i > 1) {
                titleContent = titleContent + ", " + catName;
            } else {
                titleContent = catName;
            }
        }
        // Generamos un array con los nombres asignados a cada imagen
        const titleArray = titleContent.split(', ');
        //Limpiamos el container entre llamada y llamada
        container.innerHTML = '';

        // Generamos un article que consta de una imagen y un boton para agregar a favs por cada uno de los michis que importamos
        // Asignamos un id dinamico a cada img y cada button por medio de un incrementor en caso que lo necesitemos mas adelante (Css por ej)
        let incrementor = 1;
        for (element of data) {
            const article = document.createElement('article')
            const fav_button = document.createElement('button')
            fav_button.type = 'button'
            fav_button.id = `fav_button-img${incrementor}`
            fav_button.className = 'choice-button'
            fav_button.innerHTML = 'Save in favs!'
            const img = document.createElement('img');
            img.id = `img${incrementor}`
            img.src = element.url;
            img.dataset.id = element.id;
        //Basandonos en el nombre que se le asigno en el titulo se lo alojamos en un dataset para enviarlo mas adelante
            img.dataset.catName = titleArray[incrementor - 1];
            img.width = 300;
            img.height = 300;
            article.appendChild(img)
            article.appendChild(fav_button)
            container.appendChild(article)
        // Los guardamos en favs enviando tanto su id como el nombre aleatorio que se le brindo en la funcion randomCatName
            fav_button.addEventListener('click', () => {
                saveFavouriteMichis(img.dataset.id, img.dataset.catName);
            });

            incrementor++
        }
        title.innerHTML = titleContent;
    }
};

Alex Maurice

student•

También pueden usar el ++Try / Catch++ y con ++map++ crear un cliclo, ejemplo-

 try{
        const michi = await saveMichi();
        let view = `
            ${data.map(michiup => `
            <article id="article">
            <div>
                <img src='${michiup.image.url}'">
            </div>
            <button class="favorito like"><img src="./dislike-icon.png"></div></button>
        </article>
            `)}
        `;
        favoriteMichi.innerHTML = view
    } catch(error){
        console.log(error)
    }

Jeans Pierre Monrroy Caicedo

student•

Misael Gomez

student•

comparto documentación sobre el parsing https://developer.mozilla.org/en-US/docs/Glossary/Parse

Mauricio Miguel Rivera

student•

Hola, el array que se genera al interactuar con la API favourites, ya viene por defecto con la API verdad? Sé que se había explicado en clases anteriores, pero estoy un poco confundido con el origen de ese array.

Kevin Isaí Santiago López

student•

Les comparto mi progreso

Muy guapa la 2da foto

👉☀️🐈

CRISTIAN DARIO AGUDELO PORRAS

student•

Se ve muy chereve, me gustaria saber como hacer para agregar el boton dentro de la imagen, si eres tan amable. gracias

Kevin Isaí Santiago López

student•

Con la propiedad de position En el contenedor de la imagen usas position: relative; Y en el boton de like usas:

  position: absolute;
  top: 25px;
  right: 25px;

Puedes leer mas sobre position aquí ⬇️ https://css-tricks.com/almanac/properties/p/position/

Andrés Camilo Salgado

student•

Yo lo hice de esta manera

async function dogsFovurites (subId) {
        let favDogs = d.querySelector('#favDogs');
        const res = await fetch(`${endpoint.URL_API_FAVOURITES}?sub_id=`+subId)
        console.log(res);
        const data = await res.json();
        try {
            let data_nuevo = data.slice(data.length-4);
            let datos_fav = `
            ${data_nuevo.map (dog_fav =>
                ` 
                <div class="col mb-3 me-2 ms-3" style="float: left;">
                    <div class="card " style="width: 18rem;" >
                        <img src="${dog_fav.image.url}" class="card-img-top img_cambia" alt="..." width="300" height="200">
                        <div class="card-body">
                           <button type="button" id="" class="btn btn-primary">${dog_fav.id}</button>
                        </div>
                    </div>
                </div>
                `)}`;
                favDogs.innerHTML = datos_fav.replace(/,/g,"") 
        } catch (error) {
            const errorNode = document.querySelector('#error');
            errorNode.innerText = `Error: ${error.message}`;
        }
    }

Manipulación dinámica del DOM con datos de API REST

Conceptos fundamentales

Qué es una API REST y cómo funciona con JavaScript

Flujo de comunicación entre front-end y back-end en aplicaciones web

Primeros pasos con fetch

Consumo de APIs REST públicas con JavaScript y fetch

Endpoints y query parameters en APIs REST con JavaScript

¿Qué son los HTTP Status Codes?

Diferencia entre autenticación y autorización con API keys

Proyecto

Estructura HTML para mostrar gatos aleatorios y favoritos

¿Qué son los Métodos HTTP?

Manejo de errores HTTP en peticiones GET con JavaScript

Configuración de peticiones POST con fetch en JavaScript para APIs