Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Enriqueciendo la información

13/28
Recursos

Aportes 32

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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:

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

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)

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

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

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.

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

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

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

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.

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

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.

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.

Mi codigo js hasta el momento:

const URL_API = "https://platzi-avo.vercel.app/";
const URL_API_AVO = `${URL_API}api/avo`;

const $aguacatesContainer = document.getElementById("aguacates");

async function getData() {
  const response = await fetch(URL_API_AVO);
  const data = await response.json();
  return [...data.data];
}

function createCard({ name, image, price }) {
  const $image = document.createElement("img");
  $image.src = `${URL_API}${image}`;
  const $title = document.createElement("h2");
  $title.innerText = name;
  const $price = document.createElement("div");
  $price.innerText = price;

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

  return $container;
}

function renderElements(list) {
  const $listElements = [];
  list.forEach((item) => {
    $listElements.push(createCard(item));
  });

  $aguacatesContainer.append(...$listElements);
}

async function init() {
  const data = await getData();
  renderElements(data);
}

init();

<h4>Enriqueciendo la información</h4>

Los elementos de texto pueden ser agregados a la página web con textContent y las imágenes con src.

Es una práctica común (y profesional) crear un contenedor con un id para que JS lo use para renderizar el contenido de una API.

Siento que estuviera haciendo un mini react jiji

Muy clara la definicion de API que tanto queria saber. Un puente para conectarnos a un servidor y extraer datos y llevarlos a nuestro html

Me he dado cuenta que básicamente cientos de formas para modificar la API y esto lo hace mucho mejor y entendible al ser tan flexible.

Comparto el codigo utilizando destructuracion

const baseUrl =  "https://platzi-avo.vercel.app";
const app = document.querySelector('#app');

//web api
//conectarnos al servidor
//convertir la respuesta json-data-renderizar
fetch(`${baseUrl}/api/avo`)
.then(respuesta => respuesta.json())
.then((responseJson) => {
    const items = [];
    responseJson.data.forEach(item => {
        const {name,image,price} = item;
        ///crear imagem
        const img = document.createElement('img');
            //url de la imagen;
        img.src = `${baseUrl}${image}`;
        //crear titulo
        const title = document.createElement('h2');
        title.textContent = name;
        //crear precio
        const precio = document.createElement('div');
        precio.textContent = price;
        //crar contenedor

        const container = document.createElement('div');
        container.append(img,title,precio);
        items.push(container);
    });
    app.append(...items);
})

Awww que genial este curso y estas clases 😃 estoy aprendiendo mucho 😄

Este curso me esta encantando, me alegra mucho que él sea el profe de los cursos de Next, espero ir por ahi luego de aprender React.

const urlApi = "https://platzi-avo.vercel.app/api/avo"
const container = document.querySelector('.container')

const fetchData = async() => {
    const data = await fetch(urlApi)
    const dataJson = await data.json()

    const items = []
    dataJson.data.forEach( element => {
        const box = document.createElement('div')
        box.classList.add('box')
        
        const img = document.createElement('img')
        img.src = "https://platzi-avo.vercel.app" + element.image
        img.classList.add('image')
        
        const title = document.createElement('h1')
        title.textContent = element.name
        title.classList.add('title')
        
        const price = document.createElement('p')
        price.textContent = element.price
        price.classList.add('price')

        box.append(img, title, price)
        items.push(box)
    });
    container.append(...items)
}
fetchData()
const baseUrl = "https://platzi-avo.vercel.app";
const appNode = document.querySelector('#container');

// Web API
//1 Conectarnos al servidor
//Queda de reto trabajar con async/await
window
    .fetch(`${baseUrl}/api/avo`)
//2 Procesar la respuesta y convertirla en JSON
    .then((respuesta) => respuesta.json())
//3 JSON ---> Data ---> Renderizar info browser
    .then(responseJson => {
        const todosLosItems = [];
        console.log(responseJson);
        responseJson.data.forEach((item) => {//De esta forma me traigo cada item de la API.
            console.log(item.name);
        //Crear imagen
        const imagen = document.createElement('img');
        document.body.appendChild(imagen);
        imagen.src = `${baseUrl}${item.image}`; //URL de la imagen

        // Crear título
        const title = document.createElement('h2');
        document.body.appendChild(title);
        title.textContent = item.name;

        // Crear precio
        const price = document.createElement('div');
        document.body.appendChild(price);
        price.textContent = item.price;

        // Quiero que todo lo anterior esté dentro de un div
        const container = document.createElement('div');
        container.append(imagen, title, price);
        todosLosItems.push(container);
        });
        appNode.append(...todosLosItems);
    })

Las mejoras son con async.

const baseUrl="https://platzi-avo.vercel.app"
const API= `${baseUrl}/api/avo`;
const appnode=document.querySelector("#app");

const ws1_async = async (url_api)=>{
    try {
        //connect server
        const response = await window.fetch(url_api);
        //process and convert JSON
        const data=await response.json();
        //JSON -> Data show information in brower
        const allItems=[];
        data.data.forEach((item)=>{
            // create image
            const image = document.createElement("img");
            image.src= `${baseUrl}${item.image}`;
            // create title
            const title=document.createElement("h2");
            title.textContent=item.name;
            // create price
            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);
    } catch (error) {
        console.error(error);
    }
}

ws1_async(API); 

Les comparto mi codigo, en el cual procuro dejar comentado de manera muuy explicita que es cada elemento cuando se llaman los datos de la API y se pintan en pantalla:

window
    .fetch(url)
    .then(response => response.json())
    .then((responseJson) => {
        const todosItems = [];
        responseJson.data.forEach(item => {
            //console.log(item.name)
            const img = document.createElement("img");
            const title = document.createElement("h1");
            const price = document.createElement("div");
                //price.textContent = item.price --> item.price son los datos de la Api
                // |        |-> es la prop de js para add texto en el nodo, en este caso datos de la api
                // |_> es el nodo que declaramos
                price.textContent = item.price
            const container = document.createElement("div");
            container.append(img, title, price);
            todosItems.push(container);
        });
        document.body.append(...todosItems)
});```

Cuando estoy en esta parte, como veo lo que estoy haciendo como el profesor?

![](

Donde puedo ver lo que estoy haciendo en el servidor en esta parte?
![](url)

Excelente clase en todos los aspectos!

Genial

Hola:

Otra opción sería llevarte el json completo y formatearlo en alguna página como estas:

https://jsonformatter.org/json-pretty-print

Saludos 😃

Clear water!! 👏👏😃