Descargando información y creando nodos

Clase 13 de 29 • Curso de Manipulación del DOM

Sebastian Gonzalez

student•

El fetch() con async/await

const url = "https://platzi-avo.vercel.app/api/avo";

//web api
async function fetchData() {
  const response = await fetch(url),
  data = await response.json(),
  allItems = [];

  data.data.forEach((item) => {
    // create image
    const image = document.createElement("img");
    // create title
    const title = document.createElement("h2");
    // create price
    const price = document.createElement("div");

    const container = document.createElement("div");
    container.append(image, title, price);

    allItems.push(container);
  });

  document.body.append(...allItems)
}

fetchData();

Jimmy Buriticá Londoño

student•

Me gusta más usar async/await, te quedo bien desarrollado el ejercicio.

Andrés Felipe García Rendón

student•

Muchsa gracias por compartir tus apuntes.Salu2

Andres Felipe Pinchao Ramirez

student•

MIS APUNTES 😎🤙🤙👌

//URL API
 const url = "https://platzi-avo.vercel.app/api/avo";


 /*Web API Fetch
 
 La utilizamos para traer recursos desde cualquier otro sitio web

 Lo unico que tenemos que pasarle es nuestra url
 
 1. Nos conectaremos al servidor

 */

window
    .fetch(url)
/*2. Procesar la respuesta y despues la convertimos en JSON
    Fetch es algo que nos devuelve una promesa asi que
    trabajaremos con promesas para obtener la respuesta
    y transformarla en JSON

*/
    .then(respuesta => respuesta.json())

 /*3.
 Luego de que convirtamos la respuesta en JSON lo que obtenemos
 ahora es informacion y la obtenemos concatenando otra promesa

 
 Cuando tengamos el JSON  tendremos esa informacion que
 nos servira para renderizar esa info en nuestro navegador*/
    .then(responseJson =>{

        const todosLosItems = [];
        /*recorremos cada uno de los elementos que estan en arrays
        con un forEach
        
        */

        responseJson.data.forEach(item => {
        /*atraves del parametro de la funcion del forEach accedemos
        a los elementos de la respuesta json*/

    //creamos nuestros elementos
        const imagen = document.createElement('img');
    
        const titulo = document.createElement('h2');
       
        const precio = document.createElement('div');
      
    // cremos el contenedor donde vamos a poner nuestros elementos

        const container = document.createElement('div');

    /*agregamos los elementos a un contenedor
    
        container.appendChild(imagen);
        container.appendChild(titulo);
        container.appendChild(precio);
    
    */

        container.append(imagen,titulo,precio);
        
    //agregamos el contenedor en nuestro body
        //document.body.appendChild(container);
        todosLosItems.push(container);
        
            console.log(item.name);
            
        });

        document.body.append(...todosLosItems)

    });

/*RESUMEN: NOS CONECTAMOS A UNA API QUE ES UN PUENTE CON LA INFORMACION 
  DE UN SERVIDOR Y ESE SERVIDOR NOS DEVUELVE ESA INFORMACION, Y UTILIZAMOS
  UN CICLO POR CADA UNO DE LOS ELEMENTOS QUE NOS DEVUELVE ESE SERVIDOR
  CREAMOS NODOS Y SE LOS AGREGAMOS AL FINAL A NUESTRO HTML*/

/*RETO PARA MEJORAR ESTE CODIGO  Y ES HACERLO CON ASYNC Y AWAIT EN VES 
  DE PROMESAS */```

David Daniel Castillo Nava

student•

Te ganas mi me gusta por compartir la url gracias

Luis Felipe Medina Rodriguez

student•

😎 carita fachera

Jenny Aguilar

student•

Por si hay alguno que se pregunta cómo hace Jonathan para ver en formato json lo que arroja la API directo en el navegador, hay extensiones para el navegador que son muy útiles para ello. En mi caso uso JSON Viewer y parece que el profe igual. Se habilita en la configuración del navegador y se busca desde extensiones. El repo de github es https://goo.gl/fmphc7. Espero les sirva.

Luis Alejandro Vera Hernandez

student•

Era lo que necesitaba. Gracias

Keyla Conde Sánchez

student•

Claro que me sirvió, muchas gracias!

Vsqz Gabriel

student•

Y si creamos creamos un fragmento de documento vacio el cual este listo para insertar nodo en el de la siguiente forma

let fragment = document.createDocumentFragment();

fetch(url)
	.then((res) => res.json())
	.then((data) => {
		//creamos el fragment
		let fragment = document.createDocumentFragment();

		data.data.forEach((item) => {
			let image = document.createElement('img');

			let title = document.createElement('h2');

			let price = document.createElement('span');

			const container = document.createElement('div');
			container.append(image, title, price);
			//agregamos los nodos al fragment y no al DOM directamente
			fragment.appendChild(container);
		});
		//solo renderizamos una sola vez el DOM
		document.body.append(fragment);
	});```

Jonathan 🦑 Alvarez

teacher•

Genial! es una forma más óptima :D

Edgar Lopez Arroyo

student•

Interesante, no conocía ese método :D

Guillermo Castaño Vèlez

student•

Este es el curso que estaba esperando de Platzi para poder conectar todo lo básico con el curso profesional.

Carlos Eduardo Gomez García

teacher•

Recomiendo encarecidamente trabajar con Windows Subsystem for Linux para hacer cualquier práctica de programación, en serio, creanme, les va a ahorrar demasiados dolores de cabeza, si aún no sabes cómo instalar Windows Subsystem for Linux, puedes aprenderlo en el Curso de Prework: Configuración de Entorno de Desarrollo en Windows. . Dicho esto, aquí les dejo los pasos de la instalación para NodeJS para Linux y para Windows Subsystem for Linux (Node en su versión más actualizada) . Primero, actualicemos nuestros repositorios (es muy probable que les pida su contraseña):

sudo apt update && sudo apt upgrade

Ahora, añadimos el repositorio de NodeJS el cuál nos proveerá la versión más reciente (este traerá la versión 14, si quieres puedes revisar por la versión 15):

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Ahora sí procedemos a instalar NodeJS:

sudo apt install nodejs

. Esto te debería instalar NPM y NodeJS, para revisarlo, puedes ejecutar en tu terminal esto

node --version && npm --version

¡Así de fácil es instalar cosas en Linux! . Si quieres hacerlo en Windows entonces ve a la página de NodeJS y ejecuta su instalador (recomiendo la versión LTS) :D

Pablo Verduzco

student•

También te recomiendo nvm.

Jonathan 🦑 Alvarez

teacher•

Niiice, con eso es mucho más fácil desarrollar en Windows!

@pabloverduzco recomendó NVM para manejar versiones de Node, también lo sugiero, aunque yo uso FNM (tiene una mejora de performance). Y también existe "n"

Magali Alexander López Chavira

student•

Tarea: Obtener información con async/away

John Ruiz

student•

Wenos días;

@magali

Genial código, lo he entendido muy bien, gracías.

Armando Rivera

student•

Link de la API https://platzi-avo.vercel.app/api/avo

Diego Daniel Pedroza Perez

student•

Puede ser que necesiten instalar create-snowpack-app para que funcione, Así que pueden usar npm para instalar el paquete

npm install create-snowpack-app```

Rodrigo Martinez

student•

dont forget

$ sudo

Luis Alain

student•

Si a alguien también le sucedió que no le refresca la página automáticamente y tiene que reiniciar el localhost para poder ver los cambios... Aquí les comparto la solución que a mí me funciono:

Primero vamos a crear un nuevo archivo en nuestro proyecto llamado .env
Luego, dentro de este archivo vamos a agregar las siguientes 2 líneas de código:

CHOKIDAR_USEPOLLING=true
FAST_REFRESH=false

Ojo. El archivo .env lo debemos crear en la ruta principal de nuestro proyecto, es decir, que no debe estar dentro de ninguna carpeta.

reiniciamos el localhost con las teclas CTRL + C y volvemos a ejecutar el npm start.
Si todavía no se reflejan los cambios automáticamente en el navegador, entonces detenemos nuevamente el localhost y lo volvemos a ejecutar con el siguiente comando:

CHOKIDAR_USEPOLLING=true npm start

Con esto se debería solucionar el problema. Espero que les sea de ayuda :)

Jose Oscar Rosas Perez

student•

No sé que es ese archivo . env, pero ya me actualiza automáticamente los cambios en el navegador. Gracias

Santander Cristian

student•

Gracias por el intento, pero no me funcionó.

Iván Garcia

student•

Un poco más gráfico para entenderlo mejor 🤣

Diego Rubio

student•

por qué no actualiza los freaking cambios en mi compu? instale snowpack con npm pero aun aí hago cambios y no actualiza los cambios en el browser, no sé nunca he utilizado snopack, hasta hoy ni sabía que existía

Arturo Mauricio Terceros Beltrán

student•

X2. Alguna solución?

José Luis Encastin Flores

student•

Me pasó lo mismo. Tenía que cerrar la ventana, parar el proceso en la terminal y volver a correr con npm start.

Si alguien encontró alguna solución, lo agradecería.

Hector Andres Erira Huertas

student•

Estaba teniendo problemas para crear el proyecto con npx asi que lo instalé de forma global

npm install -g create-snowpack-app

despues ejecute

create-snowpack-app my-app --template snowpack-template-tailwind```

de esta forma me funcionó, yo uso windows

Uriel Alberto Arevalo Franco

student•

Gracias, lo instalé tal cual. Y funcionó.

Juan Diego Pelaez González

student•

Muchas Gracias

Jesus Chirinos

student•

a alguien mas le ha tomado 3 días solo esta clase?

Alex Camacho

teacher•

¿Qué se te dificulto? :) Preguntando igual siempre podemos obtener explicaciones diferentes.

Jonathan 🦑 Alvarez

teacher•

Hey heyy ¿algo en particular en lo que te podamos ayudar? :D

Sebastian Heredia

student•

Que clase mas deliciosa, pude aplicar todos los conocimientos de la ruta como lo fue NPM, JS, Asincronismo, etc. :)

José Luis Encastin Flores

student•

Lo mismo pienso. Aunque me tarde cerca de una hora en esta sola clase, lo sentí súper real, porque me hizo repasar varios conceptos. ¡Me encantó! Ojalá traigan más cursos con el profesor Jonathan.

Julio Astudillo

student•

A alguien mas no le deja hacer el npm start?

Ya me viene dando problemas desde que se instalaron las dependencias con el npx

Efraín Hernández García

student•

Por si a alguien le sirve, para detener el localhost desde la terminal basta con teclear crtl + c o cmd + c

Karenn Yeraldin Hernández Duarte

student•

Async / await y algunas cositas mas

const base_url = 'https://platzi-avo.vercel.app/';

const fetchData = async () => {
    const respuesta = await fetch(`${base_url}api/avo`);
    const datos = await respuesta.json();
    
    let todosItems = [];
    datos.data.forEach(item => {
        const imagen = document.createElement('img');
        imagen.src = `${base_url}${item.image}`;

        const titulo = document.createElement('h2');
        titulo.textContent = `${item.name}`;

        const precio = document.createElement('p');
        precio.textContent = `${item.price}`;

        const container = document.createElement('div');

        container.append(imagen, titulo, precio);

        todosItems.push(container);
    });
    
    document.body.append(...todosItems);
}

fetchData();

Jose Barboza

student•

¿como cambio el puerto? Port 8080 not available. Use --port to specify a different port intente con: npm start --port 8081 npm start --port:8081

Carlos Eduardo Gomez García

teacher•

Intenta así:

npm start -- --port 8081

Jose Barboza

student•

si funciona con esto:

npm start -- --port 8081```

gracias retax

LEANDRO DARIO MAMANI

student•

Porque no me sale la misma estructura del código que al profesor?

Carlos Guillermo Coello Valenzuela

student•

es porque él tiene instalada una extensión para visualizar de mejor forma los jsons

Aquí el link a la extensión: https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=es

Fernando Quinteros Gutierrez

student•

También puedes usar Postman, para realizar este tipo de consultas de una manera más ordenada te lo recomiendo bastante, en el curso de Postman se aprende muy bien la herramienta

const url = "https://platzi-avo.vercel.app/api/avo";

//web api
async function fetchData() {
  const response = await fetch(url),
  data = await response.json(),
  allItems = [];

  data.data.forEach((item) => {
    // create image
    const image = document.createElement("img");
    // create title
    const title = document.createElement("h2");
    // create price
    const price = document.createElement("div");

    const container = document.createElement("div");
    container.append(image, title, price);

    allItems.push(container);
  });

  document.body.append(...allItems)
}

fetchData();

//URL API
 const url = "https://platzi-avo.vercel.app/api/avo";


 /*Web API Fetch
 
 La utilizamos para traer recursos desde cualquier otro sitio web

 Lo unico que tenemos que pasarle es nuestra url
 
 1. Nos conectaremos al servidor

 */

window
    .fetch(url)
/*2. Procesar la respuesta y despues la convertimos en JSON
    Fetch es algo que nos devuelve una promesa asi que
    trabajaremos con promesas para obtener la respuesta
    y transformarla en JSON

*/
    .then(respuesta => respuesta.json())

 /*3.
 Luego de que convirtamos la respuesta en JSON lo que obtenemos
 ahora es informacion y la obtenemos concatenando otra promesa

 
 Cuando tengamos el JSON  tendremos esa informacion que
 nos servira para renderizar esa info en nuestro navegador*/
    .then(responseJson =>{

        const todosLosItems = [];
        /*recorremos cada uno de los elementos que estan en arrays
        con un forEach
        
        */

        responseJson.data.forEach(item => {
        /*atraves del parametro de la funcion del forEach accedemos
        a los elementos de la respuesta json*/

    //creamos nuestros elementos
        const imagen = document.createElement('img');
    
        const titulo = document.createElement('h2');
       
        const precio = document.createElement('div');
      
    // cremos el contenedor donde vamos a poner nuestros elementos

        const container = document.createElement('div');

    /*agregamos los elementos a un contenedor
    
        container.appendChild(imagen);
        container.appendChild(titulo);
        container.appendChild(precio);
    
    */

        container.append(imagen,titulo,precio);
        
    //agregamos el contenedor en nuestro body
        //document.body.appendChild(container);
        todosLosItems.push(container);
        
            console.log(item.name);
            
        });

        document.body.append(...todosLosItems)

    });

/*RESUMEN: NOS CONECTAMOS A UNA API QUE ES UN PUENTE CON LA INFORMACION 
  DE UN SERVIDOR Y ESE SERVIDOR NOS DEVUELVE ESA INFORMACION, Y UTILIZAMOS
  UN CICLO POR CADA UNO DE LOS ELEMENTOS QUE NOS DEVUELVE ESE SERVIDOR
  CREAMOS NODOS Y SE LOS AGREGAMOS AL FINAL A NUESTRO HTML*/

/*RETO PARA MEJORAR ESTE CODIGO  Y ES HACERLO CON ASYNC Y AWAIT EN VES 
  DE PROMESAS */```

fetch(url)
	.then((res) => res.json())
	.then((data) => {
		//creamos el fragment
		let fragment = document.createDocumentFragment();

		data.data.forEach((item) => {
			let image = document.createElement('img');

			let title = document.createElement('h2');

			let price = document.createElement('span');

			const container = document.createElement('div');
			container.append(image, title, price);
			//agregamos los nodos al fragment y no al DOM directamente
			fragment.appendChild(container);
		});
		//solo renderizamos una sola vez el DOM
		document.body.append(fragment);
	});```

const base_url = 'https://platzi-avo.vercel.app/';

const fetchData = async () => {
    const respuesta = await fetch(`${base_url}api/avo`);
    const datos = await respuesta.json();
    
    let todosItems = [];
    datos.data.forEach(item => {
        const imagen = document.createElement('img');
        imagen.src = `${base_url}${item.image}`;

        const titulo = document.createElement('h2');
        titulo.textContent = `${item.name}`;

        const precio = document.createElement('p');
        precio.textContent = `${item.price}`;

        const container = document.createElement('div');

        container.append(imagen, titulo, precio);

        todosItems.push(container);
    });
    
    document.body.append(...todosItems);
}

fetchData();

Descargando información y creando nodos

DOM y Web API

Y entonces nació internet...

Accede a la versión más actualizada de este contenido

¿Qué es el DOM?

Web APIs modernas

Operaciones básicas

Leer nodos

NodeLists vs Array

Crear y agregar

Otras formas de agregar

Atributos y propiedades

Eliminar nodos

Operaciones en lote

Workshop 1: Fetch

Presentación del proyecto

Descargando información y creando nodos

Enriqueciendo la información

Usando la API de internacionalización del browser

Comparte el resultado

Eventos

Reaccionar a lo que sucede en el DOM

Event propagation

Event delegation

Workshop 2: Lazy loading

Presentación del proyecto

Nuestro propio plugin Lazy Loading

Creando las imagenes con JavaScript

Intersection Observer

Aplicando Lazy loading

Comparte el resultado

Workshop 3

Proyectos propuestos

Librerías relacionadas

¿Y jQuery?

¿Y JSX?

Conclusiones

Conclusiones