Cursos Empresas Blog Live Conf Eventos Precios

0:0010:53

Enriqueciendo la información

Curso de Manipulación del DOM

Clase 14 / 29

Ver clases

Enriqueciendo la información

Curso de Manipulación del DOM

Clase 14 de 29

Clase 14 / 29

Enriqueciendo la información

Curso de Manipulación del DOM

Clase 14 / 29

Ver clases

alberto ayala rodriguez

Hace 6 años

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`);

Griger Ratia

Hace 5 años

Genial

Chanel Mariannis Paredes Sánchez

Hace 3 años

Super, un código clean!

Comentarios (59)59 comentarios

Héctor Iván Sáenz Estrada

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:

Jonathan 🦑 Alvarez

Profesor

También la uso!

Guillermo Castaño Vèlez

Excelente aporte!

Carlos Eduardo Gomez García

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.

Anfernee Valera

Estás clases son todo lo que está bien después del curso de asincronismo

Andres Felipe Pinchao Ramirez

Jimmy Buriticá Londoño

Muy detallado el código fuente. gracias.

Andrés Felipe García Rendón

Muchas gracias por compartir tus apuntes. Saludos,

Jose Anibal Garcia Giraldo

Que tal!, yo quise probar otro tipo de soluciones. Les comparto como lo resolví con innerHTML 😎

Rosmer Edgar Minchola Gutierrez

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.

Julian Franco

En clases anteriores se menciona que no era buen aparacticar usar el innerHTML por la inyeccion de XSS

Jeferson Velásquez

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.

Gutierrez Diego

Lo acabo de pensar, mañana lo pruebo. Te funcionó?

Daniel Salazar Munoz

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.

Luis Fernando Cortes Duque

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.

Usuario anónimo

User

🧐 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);

JOSE GABRIEL CASTILLO MOSQUERA

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

Leiver Granda

Cuál es la diferencia de concatenar la url con:

imagen.src=baseUrl+item.image;

que con:

`${baseUrl}${item.image}`;

Fernando Quinteros Gutierrez

¡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.🎇

Gerardo Javier Ramírez Gómez

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. . .

Carlos Escribano Clemente

Hace 4 años

No existe ese curso, se ha borrado? Alguno similar? Yo también uso postman pero siento que le estoy sacando poco partido.

Johnnie Lopez

¿Cuál es la extensión que usa el profe para visualizar la web API en el navegador?

👋 Saludos, Johnnie!

La extensión que usa es JSON Formatter

Pero en los aportes encontrarás alternativas interesantes

💚 Nunca pares de aprender 🤟

Luis Lira

Hola! A mí me gusta mucho JSON Viewer

Diego Rubio

Porque no actualiza los cambios del proyecto en el browser?

Massimo Di Berardino

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?

Federico Upegui Restrepo

Jorge Martin Aguilar Hernández

Me está encantando este curso, justo lo que necesitaba

Roger Colquehuanca

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

BlackSip .

![](

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

Kevin J. Zea Alvarado

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.

Enriqueciendo la información

Enriqueciendo la información

Enriqueciendo la información

Progreso del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

Librerías relacionadas

Conclusiones

Enriqueciendo la información

Enriqueciendo la información

Comentarios

Comentarios