Nos conectamos a la API con fetch.
const URL = "<https://platzi-avo.vercel.app/api/avo>"
window.fetch(url)
Procesamos la respuesta y lo convertimos en JSON.
window
.fetch(url)
.then(res => res.json())
Podemos anidar varias then, en el siguiente mostraremos la info por consola.
window
.fetch(url)
.then(res => res.json())
.then(resJson => {
console.log(resJson.data);
})
// Array (9) [...]
Cada item contiene una imagen, un título y un precio. Haremos un forEach para iterar e ir creando los contenedores de cada item.
<aside> 💡 Recuerda usar un arreglo para evitar manipular el DOM por cada elemento que se crea.
</aside>
.then(resJson => {
const allItems = [];
resJson.data.forEach(item => {
console.log(item.name);
const image = document.createElement("img");
const title = document.createElement("h2");
const price = document.createElement("div");
const container = document.createElement("div");
container.append(image, title, price);
allItems.push(container);
})
document.body.append(...allItems);
})