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:
DOM y Web API
Y entonces nació internet...
¿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
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 32
Preguntas 7
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();
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
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?

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!! 👏👏😃
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.