Enriqueciendo la información

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

Héctor Iván Sáenz Estrada

student•

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

teacher•

También la uso!

Guillermo Castaño Vèlez

student•

Excelente aporte!

Carlos Eduardo Gomez García

teacher•

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

Griger Ratia

student•

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

student•

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

Andres Felipe Pinchao Ramirez

student•

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)

Jimmy Buriticá Londoño

student•

Muy detallado el código fuente. gracias.

Andrés Felipe García Rendón

student•

Muchas gracias por compartir tus apuntes. Saludos,

Jose Anibal Garcia Giraldo

student•

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

Rosmer Edgar Minchola Gutierrez

student•

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

student•

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

Jeferson Velásquez

student•

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

student•

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

alberto ayala rodriguez

student•

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

student•

Genial

Chanel Mariannis Paredes Sánchez

student•

Super, un código clean!

Daniel Salazar Munoz

student•

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

student•

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

document.querySelector("#container").append(...allItems);

JOSE GABRIEL CASTILLO MOSQUERA

student•

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

student•

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

imagen.src=baseUrl+item.image;

que con:

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

Fernando Quinteros Gutierrez

student•

¡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 😉

Leiver Granda

student•

Muchas gracias por la aclaración Fernando.🎇

Gerardo Javier Ramírez Gómez

student•

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

student•

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

Johnnie Lopez

student•

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

Fernando Quinteros Gutierrez

student•

👋 Saludos, Johnnie!

La extensión que usa es JSON Formatter

Pero en los aportes encontrarás alternativas interesantes

Espero haberte ayudado 😉

💚 Nunca pares de aprender 🤟

Luis Lira

student•

Hola! A mí me gusta mucho JSON Viewer

Diego Rubio

student•

Porque no actualiza los cambios del proyecto en el browser?

Massimo Di Berardino

student•

Hola didier, podrías ser un poco más claro con tu consulta para poder ayudarte mejor. ¿Exactamente que error estás teniendo?

Jonathan 🦑 Alvarez

teacher•

Hola Didier! ¿Qué te muestra la consola? ¿Hay algún error? ¿Estás en Windows?

Federico Upegui Restrepo

student•

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)
  })

Jorge Martin Aguilar Hernández

student•

Me está encantando este curso, justo lo que necesitaba

Roger Colquehuanca

student•

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.

Roger Colquehuanca

student•

solo estoy usando el cdn 😅. mi sitio web. https://rogergcc.github.io/

Roger Colquehuanca

student•

puedo usar **InnerHtml **si son muchos nodos, divs y class me parece mas sencillo usar eso a createElement

Jimmy Buriticá Londoño

student•

Yo acabo de terminar un proyecto con una API, fui armando el código HTML y al final lo subo con innerHTML, funciona perfectamente.

Carlos Eduardo Gomez García

teacher•

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 .

student•

![](

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

student•

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.

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)

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

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

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)
  })

Enriqueciendo la información

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