Enriqueciendo la información
Contenido del curso
Enriqueciendo la información
Contenido del curso
Héctor Iván Sáenz Estrada
Jonathan 🦑 Alvarez
Profesor
Guillermo Castaño Vèlez
Carlos Eduardo Gomez García
Griger Ratia
Anfernee Valera
Andres Felipe Pinchao Ramirez
Jimmy Buriticá Londoño
Andrés Felipe García Rendón
Jose Anibal Garcia Giraldo
Rosmer Edgar Minchola Gutierrez
Julian Franco
Jeferson Velásquez
Gutierrez Diego
alberto ayala rodriguez
Griger Ratia
Chanel Mariannis Paredes Sánchez
Daniel Salazar Munoz
Luis Fernando Cortes Duque
Usuario anónimo
User
JOSE GABRIEL CASTILLO MOSQUERA
Leiver Granda
Fernando Quinteros Gutierrez
Leiver Granda
Gerardo Javier Ramírez Gómez
Carlos Escribano Clemente
Johnnie Lopez
Fernando Quinteros Gutierrez
Luis Lira
Diego Rubio
Massimo Di Berardino
Jonathan 🦑 Alvarez
Profesor
Federico Upegui Restrepo
Jorge Martin Aguilar Hernández
Roger Colquehuanca
Roger Colquehuanca
Roger Colquehuanca
Jimmy Buriticá Londoño
Carlos Eduardo Gomez García
BlackSip .
Kevin J. Zea Alvarado
Les recomiendo la extensión de Google Chrome ++JSON viewer++, con ella podemos visualizar formato JSON en nuestro navegador de una forma ordenada. Además, es completamente personalizable. . . Al descargarlo, podrás visualizar algo como esto:
También la uso!
Excelente aporte!
La parte del rellenado de los datos es lo que más me gusta porque es como jugar con piezas de lego, básicamente puedes acceder a la propiedad de cualquier nodo y ponerle el valor que desees, es increíble! . Por si a alguien le interesa, aquí iré dejando enlaces a mi repositorio en GitHub con el código de cada clase: . Clase anterior: Creación de elementos Esta clase: Adición de los nodos al DOM
De acuerdo contigo!! Ya tenía muchas ganas de consumir PIs y veo que es genial. Podemos hacer muchísimas cosas, y hay cientos de APIs o miles?
Gracias por el repo.
Estás clases son todo lo que está bien después del curso de asincronismo
MIS APUNTES 😎👌👌
const appNode = document.querySelector('#app'); //const url = "https://platzi-avo.vercel.app/api/avo"; /* Cambiamos la url que tenemos por una url base y lo que hacemos es agregarle atraves de un template string el resto de la url que teniamos en el fetch*/ window .fetch(`${baseUrl}/api/avo`) .then(respuesta => respuesta.json()) .then(responseJson =>{ const todosLosItems = []; responseJson.data.forEach(item => { const imagen = document.createElement('img'); /* Para asignar la url que obtenemos de la api a nuestra imagen lo hacemos en la propiedad src Si la agregaramos solo con lo que obtenemos de la API nos daria un error ya que lo que obtenemos es una ruta obsuluta mas no una url por lo tanto nos dara error porque no encontraria la ruta de la imagen */ imagen.src = `${baseUrl}${item.image}`; const titulo = document.createElement('h2'); titulo.textContent = item.name; const precio = document.createElement('div'); /* Le asignamos al texto del elemento precio que es un div la informacion que obtenemos de respuesta JSON Y atraves del parametro que tenemos en la funcion del forEach accederemos al precio */ precio.textContent = item.price; const container = document.createElement('div'); container.append(imagen,titulo,precio); todosLosItems.push(container); console.log(item.name); }); appNode.append(...todosLosItems) });``` Luego agregaremos en nuestro HTML una etiqueta div con un id para meter todos nuestros nodos dentro de el, generalmente se le llama mount o app o container. <div id="app"></div> Después vamos a nuestro javascript y agregamos nuestra etiqueta div con id app const appNode = document.querySelector('#app'); y cambiamos la parte donde agregábamos todos los items al body appNode.append(...todosLosItems)
Muy detallado el código fuente. gracias.
Muchas gracias por compartir tus apuntes. Saludos,
Que tal!, yo quise probar otro tipo de soluciones. Les comparto como lo resolví con innerHTML 😎
La idea es practicar el crear, modificar, eliminar y reemplazar los nodos, en ese caso estás creando directamente código HTML. Sin embargo también da un buen resultado.
En clases anteriores se menciona que no era buen aparacticar usar el innerHTML por la inyeccion de XSS
Me parece que sería mejor si en la API se hubiese agregado la ruta completa de una vez
Así:
"image": "https://platzi-avo.vercel.app/images/maluma.jpg",
En lugar de:
"image": "/images/fuerte.jpg",
Pero esto es una prueba de que se debe de tener cuidado con este tipo de detalles al consumir una API.
Lo acabo de pensar, mañana lo pruebo. Te funcionó?
decidí utilizar async/await y separar el código de forma que cree dos funciones: una para obtener los datos y otra para pintar los datos, me gustó más porqué el código se puede leer mejor
Función para obtener los datos
const getData = async url => { try{ const response = await fetch(url); const data = await response.json(); const allAguacates = data.data; printItems(allAguacates); }catch(error){ console.log(error); } }
Función para pintar los elementos que se traen del API
const printItems = (items) => { const allItems = []; items.forEach(item => { //Crear imagen const imagen = document.createElement('img'); imagen.src = `${URL_BASE}${item.image}`; //Crear titulo const title = document.createElement('h2'); title.textContent = item.name; //crear precio const price = document.createElement('div'); price.textContent = item.price; //Crear un container const container = document.createElement('div'); container.append(imagen, title, price); allItems.push(container); }); //Agregamos todo al contendor principal appNode.append(...allItems); }
Todo el código
const URL_BASE = "https://platzi-avo.vercel.app"; const appNode = document.querySelector('#app'); //Uso de fetch const getData = async url => { try{ const response = await fetch(url); const data = await response.json(); const allAguacates = data.data; printItems(allAguacates); }catch(error){ console.log(error); } } const printItems = (items) => { const allItems = []; items.forEach(item => { //Crear imagen const imagen = document.createElement('img'); imagen.src = `${URL_BASE}${item.image}`; //Crear titulo const title = document.createElement('h2'); title.textContent = item.name; //crear precio const price = document.createElement('div'); price.textContent = item.price; //Crear un container const container = document.createElement('div'); container.append(imagen, title, price); allItems.push(container); }); //Agregamos todo al contendor principal appNode.append(...allItems); } getData(`${URL_BASE}/api/avo`);
Genial
Super, un código clean!
El profe maneja muy buenas prácticas, la diferencia en que el dom realice cambios el número de veces por componente y solo una vez está en almacenar todo en arreglos y luego ejecutarlo su contenido una vez, esto solo lo notaría una persona al tener muchos elementos por renderizar y una pagina que muere lentamente.
algo muy bueno hasta ahora del curso es que nos ensaña de varias formas a hacer lo mismo. Hasta ahora es un curso de graduación de javascript.
🧐 Dato curioso, puedes declarar el nodo de referencia en la misma línea en la que se agregan los itmes, de manera que:
document.querySelector("#container").append(...allItems);
document.querySelector("#container").append(...allItems);
Les comparto que podemos utilizar uno de estos dos métodos para recortar la cadena de texto a nuestro gusto substring() o slice() este ultimo acepta números negativos
Documentación
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String/substring
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
Cuál es la diferencia de concatenar la url con:
imagen.src=baseUrl+item.image;
que con:
`${baseUrl}${item.image}`;
¡Excelente pregunta Leiver! 😄
bueno ambas son válidas y correctas. Pero depende de las convenciones que tengas o el criterio en que concideres apta cada alternativa. En lo personal para concatenar cadenas largas que tendrán o tendre textos intermedios o muchos espacios me gusta usar los template Literals, para concatenaciones cortas, el clasico signo "+"
Espero haberte ayudado 😉
Muchas gracias por la aclaración Fernando.🎇
Postman es una plataforma que nos ayuda a visualizar Api’s propias y de terceros, además de gestionar y organizar las peticiones. Se las recomiendo mucho y les dejo el curso de Postman de platzi. . .
No existe ese curso, se ha borrado? Alguno similar? Yo también uso postman pero siento que le estoy sacando poco partido.
¿Cuál es la extensión que usa el profe para visualizar la web API en el navegador?
👋 Saludos, Johnnie!
Pero en los aportes encontrarás alternativas interesantes
Espero haberte ayudado 😉
💚 Nunca pares de aprender 🤟
Hola! A mí me gusta mucho JSON Viewer
Porque no actualiza los cambios del proyecto en el browser?
Hola didier, podrías ser un poco más claro con tu consulta para poder ayudarte mejor. ¿Exactamente que error estás teniendo?
Hola Didier! ¿Qué te muestra la consola? ¿Hay algún error? ¿Estás en Windows?
Con TypeScript
import './style.css' interface Data { image: string name: string price: string } const BASE_URL = 'https://platzi-avo.vercel.app' const appNode = document.querySelector<HTMLDivElement>('#app')! appNode.innerHTML = ` <div> <h1 class='text-center my-8 text-3xl font-bold'>Avocados store</h2> </div> ` fetch (`${BASE_URL}/api/avo`) .then(response => response.json()) .then(data => { const allItems: HTMLElement[] = [] data.data.forEach( (item: Data) => { const image = document.createElement('img') image.src = `${BASE_URL}/${item.image}` const title = document.createElement('h2') title.textContent = item.name const price = document.createElement('div') price.textContent = item.price const container = document.createElement('div') container.append(image, title, price) allItems.push(container) } ) appNode.append(...allItems) })
Me está encantando este curso, justo lo que necesitaba
Hola para mi sitio web estoy usando Tailwind CSS y tiene muchas clases y nodos para un solo item. Recomiendas crear elementos con create?
Me parece mas sencillo usar un innerHtml.
solo estoy usando el cdn 😅. mi sitio web. https://rogergcc.github.io/
puedo usar **InnerHtml **si son muchos nodos, divs y class me parece mas sencillo usar eso a createElement
Yo acabo de terminar un proyecto con una API, fui armando el código HTML y al final lo subo con innerHTML, funciona perfectamente.
La verdad es que usar innerHTML no es recomendable, es muy inseguro, la forma correcta es usar createElement, sin embargo, existen librerías (como JSX) que hacen más ameno su uso, permitiéndote crear elementos HTML de una forma más sencilla, pero recuerda que en este curso se usa Vanilla JavaSript:D
 3.27.36 p. m..png](https://static.platzi.com/media/user_upload/Captura%20de%20Pantalla%202022-08-11%20a%20la%28s%29%203.27.36%20p.%C2%A0m.-93d3a86d-3870-4a38-ba80-a58ac0af8116.jpg){kind=small}
No me ingresa los nodos creados dentro del app, en el HTML me los sigue ingresando al final del body y no donde cree la etique <div id="app"></div>
Este es el HTML
Hola, Existaya. 👋
De hecho, los estás ingresando al body con la línea de document.body.append(container);.
Si quieres ingresarlos a app, hazlo así: app.append(...elementosIterados);, pero debes tomar en cuenta que la variable de elementosIterados debe ser creada antes del forEach; si no, como solo tiene alcance/scope de bloque, no podrás acceder a ella fuera del forEach. De hecho, probablemente con ese códigoi te aparezca un error en consola al respecto.
Haz los cambios y cuéntanos cómo te fue.
