Descargando información y creando nodos
Contenido del curso
Operaciones básicas
Workshop 1: Fetch
Eventos
Workshop 2: Lazy loading
Workshop 3
Librerías relacionadas
Conclusiones
Descargando información y creando nodos
Contenido del curso
Descargando información y creando nodos
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();
Me gusta más usar async/await, te quedo bien desarrollado el ejercicio.
Muchsa gracias por compartir tus apuntes.Salu2
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 */```
Te ganas mi me gusta por compartir la url gracias
😎 carita fachera
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.
Era lo que necesitaba. Gracias
Claro que me sirvió, muchas gracias!
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); });```
Genial! es una forma más óptima :D
Interesante, no conocía ese método :D
Este es el curso que estaba esperando de Platzi para poder conectar todo lo básico con el curso profesional.
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
También te recomiendo nvm.
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"
Tarea: Obtener información con async/away
Wenos días;
@magali
Genial código, lo he entendido muy bien, gracías.
Link de la API https://platzi-avo.vercel.app/api/avo
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```
dont forget
$ sudo
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 :)
No sé que es ese archivo . env, pero ya me actualiza automáticamente los cambios en el navegador. Gracias
Gracias por el intento, pero no me funcionó.
Un poco más gráfico para entenderlo mejor 🤣
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
X2. Alguna solución?
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.
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
Gracias, lo instalé tal cual. Y funcionó.
Muchas Gracias
a alguien mas le ha tomado 3 días solo esta clase?
¿Qué se te dificulto? :) Preguntando igual siempre podemos obtener explicaciones diferentes.
Hey heyy ¿algo en particular en lo que te podamos ayudar? :D
Que clase mas deliciosa, pude aplicar todos los conocimientos de la ruta como lo fue NPM, JS, Asincronismo, etc. :)
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.
Por si a alguien le sirve, para detener el localhost desde la terminal basta con teclear crtl + c o cmd + c
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();
¿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
Intenta así:
npm start -- --port 8081
si funciona con esto:
npm start -- --port 8081```
gracias retax
Porque no me sale la misma estructura del código que al profesor?
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
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