Descargando información y creando nodos

El fetch() con async/await

const url = "https://platzi-avo.vercel.app/api/avo";

//web api
async function fetchData() {
  const response = await fetch(url),
  data = await response.json(),
  allItems = [];

  data.data.forEach((item) => {
    // create image
    const image = document.createElement("img");
    // create title
    const title = document.createElement("h2");
    // create price
    const price = document.createElement("div");

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

    allItems.push(container);
  });

  document.body.append(...allItems)
}

fetchData();

MIS APUNTES 😎🤙🤙👌

//URL API
 const url = "https://platzi-avo.vercel.app/api/avo";


 /*Web API Fetch
 
 La utilizamos para traer recursos desde cualquier otro sitio web

 Lo unico que tenemos que pasarle es nuestra url
 
 1. Nos conectaremos al servidor

 */

window
    .fetch(url)
/*2. Procesar la respuesta y despues la convertimos en JSON
    Fetch es algo que nos devuelve una promesa asi que
    trabajaremos con promesas para obtener la respuesta
    y transformarla en JSON

*/
    .then(respuesta => respuesta.json())

 /*3.
 Luego de que convirtamos la respuesta en JSON lo que obtenemos
 ahora es informacion y la obtenemos concatenando otra promesa

 
 Cuando tengamos el JSON  tendremos esa informacion que
 nos servira para renderizar esa info en nuestro navegador*/
    .then(responseJson =>{

        const todosLosItems = [];
        /*recorremos cada uno de los elementos que estan en arrays
        con un forEach
        
        */

        responseJson.data.forEach(item => {
        /*atraves del parametro de la funcion del forEach accedemos
        a los elementos de la respuesta json*/

    //creamos nuestros elementos
        const imagen = document.createElement('img');
    
        const titulo = document.createElement('h2');
       
        const precio = document.createElement('div');
      
    // cremos el contenedor donde vamos a poner nuestros elementos

        const container = document.createElement('div');

    /*agregamos los elementos a un contenedor
    
        container.appendChild(imagen);
        container.appendChild(titulo);
        container.appendChild(precio);
    
    */

        container.append(imagen,titulo,precio);
        
    //agregamos el contenedor en nuestro body
        //document.body.appendChild(container);
        todosLosItems.push(container);
        
            console.log(item.name);
            
        });

        document.body.append(...todosLosItems)

    });

/*RESUMEN: NOS CONECTAMOS A UNA API QUE ES UN PUENTE CON LA INFORMACION 
  DE UN SERVIDOR Y ESE SERVIDOR NOS DEVUELVE ESA INFORMACION, Y UTILIZAMOS
  UN CICLO POR CADA UNO DE LOS ELEMENTOS QUE NOS DEVUELVE ESE SERVIDOR
  CREAMOS NODOS Y SE LOS AGREGAMOS AL FINAL A NUESTRO HTML*/

/*RETO PARA MEJORAR ESTE CODIGO  Y ES HACERLO CON ASYNC Y AWAIT EN VES 
  DE PROMESAS */```

Por si hay alguno que se pregunta cómo hace Jonathan para ver en formato json lo que arroja la API directo en el navegador, hay extensiones para el navegador que son muy útiles para ello. En mi caso uso JSON Viewer y parece que el profe igual. Se habilita en la configuración del navegador y se busca desde extensiones. El repo de github es https://goo.gl/fmphc7. Espero les sirva.

Y si creamos creamos un fragmento de documento vacio el cual este listo para insertar nodo en el de la siguiente forma

let fragment = document.createDocumentFragment();

fetch(url)
	.then((res) => res.json())
	.then((data) => {
		//creamos el fragment
		let fragment = document.createDocumentFragment();

		data.data.forEach((item) => {
			let image = document.createElement('img');

			let title = document.createElement('h2');

			let price = document.createElement('span');

			const container = document.createElement('div');
			container.append(image, title, price);
			//agregamos los nodos al fragment y no al DOM directamente
			fragment.appendChild(container);
		});
		//solo renderizamos una sola vez el DOM
		document.body.append(fragment);
	});```

Este es el curso que estaba esperando de Platzi para poder conectar todo lo básico con el curso profesional.

Recomiendo encarecidamente trabajar con Windows Subsystem for Linux para hacer cualquier práctica de programación, en serio, creanme, les va a ahorrar demasiados dolores de cabeza, si aún no sabes cómo instalar Windows Subsystem for Linux, puedes aprenderlo en el Curso de Prework: Configuración de Entorno de Desarrollo en Windows.
.
Dicho esto, aquí les dejo los pasos de la instalación para NodeJS para Linux y para Windows Subsystem for Linux (Node en su versión más actualizada)
.
Primero, actualicemos nuestros repositorios (es muy probable que les pida su contraseña):

sudo apt update && sudo apt upgrade

Ahora, añadimos el repositorio de NodeJS el cuál nos proveerá la versión más reciente (este traerá la versión 14, si quieres puedes revisar por la versión 15):

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Ahora sí procedemos a instalar NodeJS:

sudo apt install nodejs

.
Esto te debería instalar NPM y NodeJS, para revisarlo, puedes ejecutar en tu terminal esto

node --version && npm --version

¡Así de fácil es instalar cosas en Linux!
.
Si quieres hacerlo en Windows entonces ve a la página de NodeJS y ejecuta su instalador (recomiendo la versión LTS) 😄

Tarea: Obtener información con async/away

Link de la API
https://platzi-avo.vercel.app/api/avo

Puede ser que necesiten instalar create-snowpack-app para que funcione,
Así que pueden usar npm para instalar el paquete

npm install create-snowpack-app```

Si a alguien también le sucedió que no le refresca la página automáticamente y tiene que reiniciar el localhost para poder ver los cambios… Aquí les comparto la solución que a mí me funciono:

1. Primero vamos a crear un nuevo archivo en nuestro proyecto llamado .env

2. Luego, dentro de este archivo vamos a agregar las siguientes 2 líneas de código:

CHOKIDAR_USEPOLLING=true
FAST_REFRESH=false 

Ojo. El archivo .env lo debemos crear en la ruta principal de nuestro proyecto, es decir, que no debe estar dentro de ninguna carpeta.

1. reiniciamos el localhost con las teclas CTRL + C y volvemos a ejecutar el npm start.

2. Si todavía no se reflejan los cambios automáticamente en el navegador, entonces detenemos nuevamente el localhost y lo volvemos a ejecutar con el siguiente comando:

CHOKIDAR_USEPOLLING=true npm start

Con esto se debería solucionar el problema. Espero que les sea de ayuda 😃

Un poco más gráfico para entenderlo mejor 🤣

por qué no actualiza los freaking cambios en mi compu? instale snowpack con npm pero aun aí hago cambios y no actualiza los cambios en el browser, no sé nunca he utilizado snopack, hasta hoy ni sabía que existía

Estaba teniendo problemas para crear el proyecto con npx asi que lo instalé de forma global

npm install -g create-snowpack-app

despues ejecute

create-snowpack-app my-app --template snowpack-template-tailwind```

de esta forma me funcionó, yo uso windows

Que clase mas deliciosa, pude aplicar todos los conocimientos de la ruta como lo fue NPM, JS, Asincronismo, etc. 😃

Por si a alguien le sirve, para detener el localhost desde la terminal basta con teclear crtl + c o cmd + c

Async / await y algunas cositas mas

const base_url = 'https://platzi-avo.vercel.app/';

const fetchData = async () => {
    const respuesta = await fetch(`${base_url}api/avo`);
    const datos = await respuesta.json();
    
    let todosItems = [];
    datos.data.forEach(item => {
        const imagen = document.createElement('img');
        imagen.src = `${base_url}${item.image}`;

        const titulo = document.createElement('h2');
        titulo.textContent = `${item.name}`;

        const precio = document.createElement('p');
        precio.textContent = `${item.price}`;

        const container = document.createElement('div');

        container.append(imagen, titulo, precio);

        todosItems.push(container);
    });
    
    document.body.append(...todosItems);
}

fetchData();

quien carajos programa en vscode con el fondo blanco :v

AHHHH editor en tono claro :0!!!

Asi lo hice yo espero te ayude! 😄

Async/Await de la primera parte:

const direccionUrl = "https://platzi-avo.vercel.app/api/avo";
    const resultado = async () => {
        const respuesta = await fetch(direccionUrl)
         const responseJson = await respuesta.json()
        console.log(responseJson.data.forEach(element => {
            console.log(element.name);
        })
        );
    }

    resultado();

¿Alguien sabe que fuente utiliza el profesor en su editor?

Dejo esto por si a alguien le Interesa
Esta es una extesion de Chrome para poder visualizar JSON desde al navegador. De la misma forma que el Profe en el minuto 5:36.

No sé si les pasa pero después de conocer ya bien sobre react, volver a ver estas maravillas y decir wow react gracias por tanto.
Igual amó modificar el dom así con vanilla ❤️

Hola:

Para los que no tiene instalado snowpack:

$ npm install -g snowpack

y para crear el proyecto usando los templates:

$ npm i -g create-snowpack-app

y sino quieres instalarlo de forma global (-g), puedes hacerlo sólo para desarrollo ( --save-dev)

Saludos 😃

Y así queda la version con async awair

Esta clase no funciona, como muchos de mis compañeros lo que escribo en el código no se representa en la página renderizada, no entiendo que hacer…

Para que la API se vea como la muestra el profesor, en chrome existe una extension que se llama JSON Viewer, la instalan y recargan la pagina y VOILÀ

Mi solucion:

/**
 * This file is just a silly example to show everything working in the browser.
 * When you're ready to start on your site, clear the file. Happy hacking!
 **/
const url = "https://platzi-avo.vercel.app/";

// Conect to server
async function getData() {
  const response = await fetch(`${url}api/avo`)
    .then(res => res.json()),
  data = await response.data;

  const items = document.createDocumentFragment();

  data.forEach((item) => {
    const container = document.createElement('div');
    const img = document.createElement('img');
    img.src = `${url}${item.image}`;

    const title = document.createElement('h2');
    title.textContent = item.name;

    const price = document.createElement('p');
    price.textContent = item.price.toString();

    container.append(img, title, price);
    items.append(container)
  });

  document.body.append(items);
}

getData();

hey pero que bueno, creo que asi optimizamos el dom para no mandarle tantas veces el append()

contarles que tuve 2 errores. primero era porque no tenia instalado yarn. (npm install --global yarn) con este comando lo pueden solucionar previamente tener node instalado. El otro fue que mi carpeta de usuario tenia espacio “juan cardozo” entonces causa que falle el npx… entonces la deje como juan haciendo esto: (https://www.softzone.es/windows/como-se-hace/cambiar-nombre-carpeta-usuario/)

Curso de Asincronismo con JavaScript

Podemos usar map en vez de forEach. También me parece que una forma más directa de crear los elementos, ya con todos los atributos, es escribir los elementos con `` y agregarlos al contenedor

const url = "https://platzi-avo.vercel.app/api/avo"

window.fetch(url)
    .then(respuesta => respuesta.json())
    .then(responseJson => {
        let allItems = ''
        const container = document.querySelector("#container")
        responseJson.data.map(item => {
            allItems += `<div>
                <img src="https://platzi-avo.vercel.app/${item.image}" alt="${item.name}"/>
                <h2>${item.name}</h2>
                <p>${item.price}</p>
            </div>`
        })
        container.innerHTML = allItems
        }
    )

Para ver los objetos del api en forma ordenada, existe una extensión de Chrome llamada “JSON Viewer”

En Ubuntu intenté de todo para hacer andar el template del profesor, pero cuando intentaba levantar el server buscaba archivos que no existen y por consiguiente resultaba en 404s, de manera que lo estoy hacieindo en HTML, CSS y JS vanilla con async/await, similar al codigo de Sebastián Gonzales

Hice los pasos para descargar la plantilla y me la mostró como un HTML sin formato, no entiendo cuál es el problema aquí.

Qué debo hacer en caso de que no se me realice la actualización automática ?? No quiero estar cerrando y abriendo el server a cada rato XD

Alguien sabe como puedo solucionar esto? cuando trato de ejecutar el script me da error.

mumv1@DESKTOP-CRLS8B7 MINGW64 ~/documents/platzi/dom (master)
$ npx create-snowpack-app workshop-1-fetch --template snowpack-template-tailwind
npx: installed 24 in 4.918s

  - Using template snowpack-template-tailwind
  - Creating a new project in C:\Users\mumv1\documents\platzi\dom\workshop-1-fetch
  - Installing package dependencies. This might take a couple of minutes.


> [email protected] postinstall C:\Users\mumv1\documents\platzi\dom\workshop-1-fetch\node_modules\esbuild
> node install.js


> undefined prepare C:\Users\mumv1\documents\platzi\dom\workshop-1-fetch
> husky install

C:\Users\mumv1\Documents\PLATZI\dom\workshop-1-fetch\node_modules\husky\lib\commands\install.js:22
        throw new Error(`.git can't be found (see ${customDirHelp})`);
        ^

Error: .git can't be found (see https://typicode.github.io/husky/#/?id=custom-directory)
    at Object.install (C:\Users\mumv1\Documents\PLATZI\dom\workshop-1-fetch\node_modules\husky\lib\commands\install.js:22:15)
    at Object.<anonymous> (C:\Users\mumv1\Documents\PLATZI\dom\workshop-1-fetch\node_modules\husky\lib\bin.js:56:19)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! undefined prepare: `husky install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the undefined prepare script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mumv1\AppData\Roaming\npm-cache\_logs\2021-03-31T23_07_44_760Z-debug.log
(node:11412) UnhandledPromiseRejectionWarning: Error: Command failed with exit code 1: npm install --loglevel error
    at makeError (C:\Users\mumv1\AppData\Roaming\npm-cache\_npx\11412\node_modules\create-snowpack-app\node_modules\execa\lib\error.js:59:11)
    at handlePromise (C:\Users\mumv1\AppData\Roaming\npm-cache\_npx\11412\node_modules\create-snowpack-app\node_modules\execa\index.js:114:26)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async C:\Users\mumv1\AppData\Roaming\npm-cache\_npx\11412\node_modules\create-snowpack-app\createSnowpackApp.js:221:5
(Use `node --trace-warnings ...` to show where the warning was created)
(node:11412) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promis
e which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_u
nhandled_rejections_mode). (rejection id: 1)
(node:11412) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zer
o exit code.

![](

Acá les dejo una ayudita!

const url = "https://platzi-avo.vercel.app/api/avo";

// Web api
// Conectar con el servidor
async function fetchData() {
  const response = await fetch(url),
    // procesar la respuesta y converitrla a JSON
    data = await response.json(),
    allItems = [];
  // Renderiza la respuesta
  data.data.forEach((item) => {
    // create image
    const image = document.createElement("img");
    // create tittle
    const tittle = document.createElement("h2");
    //create price
    const price = document.createElement("div");
    //Que se cree no quiere decir que se agregue al DOM
    const container = document.createElement("div");
    container.append(image, tittle, price);

    allItems.push(container);
  });
  // por eso acá lo agregamos
  document.body.append(...allItems)
}

fetchData();```

Uno como hace para que la API le salga asi de bonita a mi me sale ilegible.

https://platzi-avo.vercel.app/api/avo

Algo mucho mas práctico y de fácil lectura es tener una función que manipule el dom para cada item, y solamente se llama en el fetch

const url = 'https://platzi-avo.vercel.app/api/avo'

async function fetchData() {
    const response = await fetch(url);
    const info = await response.json();
    displayItems(info.data);
}
fetchData();

function displayItems(item){
    const allItems = [];
    item.forEach((element) =>{
        const imagen = document.createElement('img');

        const titulo = document.createElement('h1');
        
        const precio = document.createElement('div');

        const container = document.createElement('div');
        container.append(imagen, titulo, precio);

        allItems.push(container);
    }
    );
    document.body.append(...allItems);
}

Dato Curioso sobre el espacio en memoria que toma cada uno:

El objeto DocumentFragment se guarda en una variable pero este no solo toma el espacio que tomaria una variable sino que tambien toma el espacio de las referencias que se guardan dentro de este objeto.

Tambien el DocumentFragment es considerado un tipo de Objeto de JS y/o un nodo especial que actua como un contenedor de otros nodos para agregar al DOM.

En el caso de querer agrupar los nodos que seran agregados al DOM con un array hay que tomar en cuenta que en JS no se especifica cuantos elementos el array tendra por lo que en JS se reserva unos espacio adicionales en memoria basado en el pensamiento de que el array podria seguir creciendo en un futuro.

CONCLUSION:

Por la razon de reserva de espacios adicionales en el array y lo metodos que se usen como .push(), es mas eficiente la opcion DocumentFragment. Quiero dejar claro que aunque hay un beneficio entre las dos opciones ya mencionadas este es muy pequeño por lo que lo mas importante al decidir cual de las dos opciones vamos a usar sera la legibilidad de codigo y facilidad de entendimiento sobre este.

FUENTES:

ChatGPT
https://platzi.com/clases/2156-estructuras-datos/33723-arrays/

Deje mi aporte de lo mismo de la clase pero hecho un una funcion asincrona, anonima y autoejecutable

const url = 'https://platzi-avo.vercel.app/api/avo';
(async () => {
    //procesar la respuesta y convertila en JSON
    const response = await fetch(url)
    // JSON => data => renderizar info en browser
    const responseJson = await response.json()
    const  allItems = []
    responseJson.data.forEach(item => {
        // crear imagen
        const imagen = document.createElement('img');
        // crear titulo
        const title = document.createElement('h2');
        // crear precio
        const price = document.createElement('div');

        const container = document.createElement('div');
        container.append(imagen, title, price);

        allItems.push(container);
    })
    document.body.append(...allItems)
})()

const API = "https://platzi-avo.vercel.app/api/avo";

async function getAvocado(){
  const res = await fetch(API);
  const dataJson = await res.json();
  return await dataJson.data;
}
console.log(getAvocado())

Otra manera usando el insertAdjacentHTML con Asinc y Await:

const url = 'https://platzi-avo.vercel.app/';
const urlData = 'api/avo';


async function llamada() {
    try {
        const response = await fetch(`${url}${urlData}`);
        const resJson = await response.json();
        console.log(resJson);
        const data = resJson.data;
        const items = [];

        data.forEach(item => {

            const container = `
                <div class="container">
                    <img src="${url}${item.image}" alt="${item.name}">
                    <h2>${item.name}</h2>
                    <p>$${item.price}<p>
                </div>
            `;
            items.push(container);
        });

        document.body.insertAdjacentHTML('beforeend', items );


    } catch (error) {
        console.log('Ocurrió un error: ', error);
    }
};

llamada();

Excelente clase, recopila todo llevandolo a la práctica.

Mi solución 💀

const api = "https://platzi-avo.vercel.app/api/avo";
const content = null || document.getElementById("content");

async function fetchData() {
  const response = await fetch(`${api}`);
  const data = await response.json();
  return data;
}

(async () => {
  try {
    const items = await fetchData(`${api}`);

    let view = `
        ${items.data
          .map(
            (item) =>
              ` <a href="" class="">
          <img/ 
          src="${item.image}"
          alt="${item.name} image"
          />
          
          <div>
            <h2>${item.name}</h2>

            <span></span>

            <p>${item.price}</p>
          </div>
          </a>
        `
          )
          .join("")}`;
    content.innerHTML = view;
  } catch (error) {
    console.log(error);
  }
})();
fetchData();

async function infoData(url) {
  try {
    const response = await fetch(url)
    const { data } = await response.json()
    for (let item of data) {
      console.log(item.name)
    }

  } catch (err) {
    console.log(err)
  }
}


infoData(url)

Imposible instalarlo en WSL a Snowpack, la unica solucion es hacer un proyecto fuera de WSL y funciona perfecto.

Fetch with asyn/await

const url = "https://platzi-avo.vercel.app/api/avo";

(async function () {
  /* Fetching the data from the url. */
  const res = await window.fetch(url);

  /* Destructuring the data from the response. */
  const { data } = await res.json();

  const items = [];

  data.forEach((avo) => {
    /* Creating the elements that will be used to display the data. */
    const image = document.createElement("img");
    const title = document.createElement("h2");
    const price = document.createElement("div");

    /* Creating a div element and appending the image, title and price to it. */
    const container = document.createElement("div");
    container.append(image, title, price);

    /* Pushing the container element to the items array. */
    items.push(container);
  });

  /* Appending the items array to the body of the document. */
  document.body.append(...items);
})();

Apuntes de la clase, y usando async / await en lo personal siento que se lee más facil así:

// 1. Conectarnos al servidor.
const getData = async () => {
    // 2. Procesar la respuesta y convertirla en JSON
    const response = await fetch(API);
    const responseJSON = await response.json();

    // 3. JSON -> Data -> Renderizar info en el broweser
    // Array vacio donde se guardaran los items
    const todosLosItems = [];
    responseJSON.data.forEach((item) => {
        // Crear la imágen
        const image = document.createElement("img");
        // Crear el título
        const title = document.createElement("h2");
        // Crear el precio
        const price = document.createElement("div");
        // Creando el contenedor padre
        const container = document.createElement("div");

        // Agregando los hijos al padre
        container.append(image, title, price);

        // Agregando cada item al array:
        todosLosItems.push(container);
    })

    // Agregando al body el resultado de lo que haya dentro del array
    document.body.append(...todosLosItems);
}

getData();

Fetch con asynch y await > try/catch

import fetch from "node-fetch";
const API = "https://platzi-avo.vercel.app/api/avo";

async function fetchData(urlApi) {
  const response = await fetch(urlApi);
  const data = response.json();
  return data;
}

const DataFuncion = async (urlApi) => {
  try {
    const datos = await fetchData(`${urlApi}`);
    // console.log(datos);
    datos.data.forEach((item) => {
      console.log(item.name);
    });
  } catch (error) {
    console.error(error);
  }
};

DataFuncion(API);

Es el primer curso que se debe tomar antes de sufrir tanto en todos los demás, gracias Profe por ser tan claro en su explicación.

Si están en vscode y ya metieron tantos comandos y carpetas, y no quieren volver abrir otro vscode, hagan este comando:

code -r .

si a alguien más le gustan los temas claros, hay uno bonito que se llama Light Pink

essta fue la clase m,as dificil que pase :DD tube que investigar los bodys y leer bastante

Bueno, yo lo hice con try-catch, funciona hasta ahora, no sé si igual me faltó algo, o me sobra.

const API = "https://platzi-avo.vercel.app/api/avo"

// WEB API
async function fetchData(urlAPI) { //siempre async antes de function
    const response = await fetch(urlAPI); //hacemos uso del await y llamamos el fetch(promesa), como argumento la url
    const data = await response.json(); //hacemos uso del await, para esperar a que los datos transformandolos en json
    return data; //retorna la información que nos trae de nuestra API.
}

(async () => {
    try{
        const pageApi = await fetchData(API);
        const allitems = [];
        const itemName = pageApi.data.forEach(item => {
        //crear imagen
        const image = document.createElement('img');
        //crear título
        const tittle = document.createElement("h2");
        //crear precio
        const price = document.createElement("div");
        //contenedor
        const container = document.createElement("div")
        container.append(image, tittle, price);

        allitems.push(container);

        document.body.append(...allitems);
})
    } catch {
console.error(error)
    }
})();

A alguno les sucede que sólo les carga 1 solo div cuando renderizan en el navegador?
.
.
.
Código:

async function fetchData() {
    const response = await fetch(url);
    const responseJson = await response.json();
    const allItems = []; 
    //all elements created will be inside JS memory in this array
    responseJson.data.forEach((item) => {
        //create node with image
        const image = document.createElement('img');

        //create node with title
        const title = document.createElement('h2');

        //create node with price
        const price = document.createElement('div');

        const container = document.createElement('div');
        container.append(image, title, price);
        
        allItems.push(container);
    })

    document.body.appendChild(...allItems);
}

fetchData();

.
.
.
captura:
.
.
.

Snowpack, alternativa a empaquetadores como webpack y parcel. Como vemos en el vídeo nos configura nuestro entorno de desarrollo para iniciar a escribir código. En mi caso opte por vitejs que es algo similar.

Cualquier comentario es de ayuda, no estoy seguro de estar implementando async/await de la mejor forma:

const API = "https://platzi-avo.vercel.app/api/avo";

async function fetchData(urlApi){

    const response = await fetch(urlApi); //Conectarnos al servidor
    let data = await response.json(); //procesar la respuesta y convertirla en json
    return data

}

// JSON -> Data -> Renderizar info en browser

let allItems = []; 

fetchData(API)
    .then(items =>{

        items.data.forEach(item => {

            const img = document.createElement('img');
            const title = document.createElement('h2');
            const price = document.createElement("div");
            
            const container = document.createElement("div");
            container.append(img, title, price)
            console.log(item);

            allItems.push(container);
            
        });

        document.body.append(...allItems);

    });

Con asyncAwait:

Con esto ya obtengo los nombres:

Literal creo que aqui aprendi a consumir una API

const url = "https://platzi-avo.vercel.app/api/avo";

const avocados = async (urlApi) => {
    try {
        const URL = await fetch(urlApi);
        const data = await URL.json();
        const todosLosItems = [];
        data.data.forEach(element => {
            // crear imagen
            const image = document.createElement("img");
            // crear titulo
            const title = document.createElement("h2");
            // crear precio
            const price = document.createElement("p");
            
            const container = document.createElement("div");
            container.append(image, title, price);

            todosLosItems.push(container)
        });
        document.body.append(...todosLosItems);
    } catch(error) {
        console.error(error);
    }
}

avocados(url);

El ejercicio

const url = "https://platzi-avo.vercel.app/api/avo";
// Web API
const fetchData = async (url) => {
  try {
    // 1. Conectarnos al server
    const response = await fetch(url);
    // 2. procesar la respuesta y convertirla en JSON
    const responseJson = await response.json();
    // 3. JSON --> renderizar info en el browser
    const itemsToRender = storeItemsToRender(responseJson);
    // 4. Añadir los nodos al body
    document.body.append(...itemsToRender);
  } catch (error) {
    console.log(error);
  }
};

// Crea la estructura del nodo que presenta los aguacates
const createNewNode = (item) => {
  // Crear imagen
  const image = document.createElement("img");
  // Crear título
  const title = document.createElement("h2");
  // Crear precio
  const price = document.createElement("div");
  // Crear contenedor
  const nodeContainer = document.createElement("div");
  // Añade nodos al nuevo contenedor
  nodeContainer.append(image, title, price);
  // Devuelve el contenedor
  return nodeContainer;
};

// Acomoda los nodos de aguacate en un array
const storeItemsToRender = (responseJson) => {
  const itemsToRender = [];
  responseJson.data.forEach((item) => {
    const newNode = createNewNode(item);
    itemsToRender.push(newNode);
  });
  return itemsToRender;
};

fetchData(url);

async - await

const getData = async() =>  {
    const response = await fetch(URLmain+'/api/avo');
    const datos = await response.json();

    console.log(datos.data);

    let allItems = [];
    datos.data.forEach(element => {
        console.log(element.name);

        const image = document.createElement('img');
        image.src = `${URLmain}${element.image}`

        const title = document.createComment('h2').textContent = `${element.name}`;
        
        const price = document.createComment('p').textContent = `${element.price}`;

        const card = document.createElement('div');
        card.append(image, title, price);
        allItems.push(card);
    });
    document.body.append(...allItems);
}


getData(); 

Para aquellos que no se les carga el index con los estilos, o para aquellos que hacen un cambio en el html y no muestra los cambios asegurense que en la terminal se encuentre asi:

Osea correr el comando npm start y dejarlo alli que se abra automaticamente, yo por error cerré la terminal y abri el index.html de manera habitual y por eso no se cargaron los estilos ni los cambios que iba realizando

man, me quedè ciego con tu VSC jajajaja

Al parecer tiene problemas con las dependencias este template:

Problema de Recargar la Página.

La solución que apliqué, es corriendo todo desde el root (~) en WSL, no funciona mediante /mnt

Aqui tengo una forma diferente a las que hizo el profesor para imprimir el array de objetos, tanto con fetch como con async/await.

const API = "https://platzi-avo.vercel.app/api/avo";

window
  .fetch(API)
  .then((response) => response.json())
  .then((response2) => {
    const dataArry = response2.data;

    console.group("Utilizando fetch")
    for (const item of dataArry) {
      console.log(item.name);
    }
    console.groupEnd()
  });

async function traerData() {
  const response = await fetch(API),
  objetData = await response.json()
  const items = objetData.data;

  console.group("Utilizando async/await")
  for (const item of items) {
    console.log(item.name);
  }
  console.groupEnd()
}

traerData()

Y por aqui, asi quedarian los ejercicios finales cuando creamos los diferentes elementos HTML con las dos parte de codigo (fect y async/await)

const API = "https://platzi-avo.vercel.app/api/avo";

window
  .fetch(API)
  .then((response) => response.json())
  .then((response2) => {
    const dataArry = response2.data;
    const allItems = [];

    console.group("Utilizando fetch");
    for (const item of dataArry) {
      // console.log(item.name);
      const image = document.createElement("img");
      const title = document.createElement("h2");
      const price = document.createElement("p");

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

      allItems.push(container);
    }
    document.body.append(...allItems);
    console.groupEnd();
  });

async function traerData() {
  const response = await fetch(API),
    objetData = await response.json();
  const items = objetData.data;
  const allItems = [];
  console.group("Utilizando async/await");
  for (const item of items) {
    // console.log(item.name);
    const image = document.createElement("img");
      const title = document.createElement("h2");
      const price = document.createElement("p");

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

      allItems.push(container);
  }
  document.body.append(...allItems);
  console.groupEnd();
}

traerData();

Mi código y como se visualiza el resultado (más abajo):

const baseURL = 'https://platzi-avo.vercel.app/';
const api = 'api/avo';

const resp = await window.fetch(baseURL+api);
const { data } = await resp.json();

// Arreglo de contenedores
const allItems = [];

data.forEach( item => {
    // Crear imagen
    const image = document.createElement('img');
    image.src = baseURL+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 contenedor
    const container = document.createElement('div')
    container.append(image, title, price)
    container.style.textAlign = 'center';
    container.style.width = '350px';
    
    allItems.push(container)
});

// Agregar al body
document.body.append(...allItems)

Hola dejo mi código con Async/await.
Me adelante un poquitito y agregue el contenido a los elementos 😅

const URL = "https://platzi-avo.vercel.app"
const API = "/api/avo"

 const app = async (url) => {

    try{
        const response = await (await (window.fetch(url))).json()
        const elementsArray = [];
        
        response.data.map(item => {
            
            const {  name, image, price  } = item;
            
            const container = document.createElement("div")
            const titulo = document.createElement("h3")
            const imagen = document.createElement("img")
            const precio = document.createElement("p")

            titulo.textContent = name
            imagen.src = `${URL + image}`
            precio.textContent = `Precio: ${price}`

            container.append(titulo, imagen, precio)
            elementsArray.push(container)
        })

        document.body.append(...elementsArray)
    }
    catch(err){
        console.error(err.message)
    }
}

app(URL + API)

Esta es mi solución😁

const url = "https://platzi-avo.vercel.app/api/avo";

function create({ imageLink, titleLink, priceLink }) {
    const image = document.createElement('img');
    image.src = imageLink
    image.alt = `image of a ${titleLink}`
    const title = document.createElement('h2');
    title.innerText = titleLink
    const price = document.createElement('div');
    price.innerText = priceLink
    const container = document.createElement('div');

    container.append(image, title, price);
    document.body.append(container);
}

async function getData(link) {
    let list = []

    await fetch(link)
        .then(res => res.json())
        .then(resJson => list = [...resJson.data])

    list.forEach(elem => {
        console.log(elem)
        create({
            imageLink: elem.image,
            titleLink: elem.name,
            priceLink: elem.price
        })

    })
}
getData(url)

Resultado

//Guardar la URL Del API
const url = "https://platzi-avo.vercel.app/api/avo";
//Web api
// Conectarmos al Servidor
// fetch lo que hace es traer informacion del servidor y procesarla
window
.fetch(url)
// Procesar la respuesta y convertirla en JSON
.then((response) => response.json())
//JSON -> Data -> Renderizar info en el Browser

.then((responseJson)=> {
  //Agregar todos los items de forma dinamica
  const todosLosItems = [];

  //Ciclo para por cada uno de los items que devuelve el servidor,
  //creamos nodos y se los agregamos al final de nuestro HTML
  responseJson.data.forEach(item => {            
    // Imprime los Items de la APi de Avocados
   // console.log(item.name) 
       
   //crear la imagen
        const imagen = document.createElement('img');
       //agregando al Body document.body.appendChild(imagen)
        
        //crear el titulo
        const title = document.createElement('h2');
        //document.body.appendChild(title)
       
        //crear el precio
       const price = document.createElement('div');
      //document.body.appendChild(price)

       const container = document.createElement('div')
       //Agrega la imagen, titulo, y precio al container
       container.append(imagen, title, price);

       //document.body.appendChild(container)

       //agregando todos los items con un Array
       todosLosItems.push(container);
   });
   //cuando acabes agregalos al Body
   document.body.append(...todosLosItems);
})

Les dejo por aca mi codigo, ya se puede visualizar el price y el name en pantalla

 //--------------------Intento de hacerlo con async y await------------------------//
    
    //se crea una funcion async con x nombre
    async function fetchData() {

        //dentro de ella se crea una constante con un nombre x (en este casi se llama response) la cual va a contener el fetch que en este caso es el API, se usa await porque queremos esperar que la funcion no continue hasta que se obtenga esta respuesta 
        const response = await fetch(url),

        //aqui se usa el mismo await por lo mismo, no podemos seguir sin esta variable, y lo que se hace aca es que se pasa la respuesta a json 
        api = await response.json(),

        //se crea un array donde iran todos los documentos 
        allItems = []
        
        api.data.forEach(nombres => {
          //  console.log(nombres.name);
        const nombreScreen = document.createElement("p");
        const texto= document.createTextNode(nombres.name);
        nombreScreen.append(texto);
        const precioScreen = document.createElement("p");
        const precio= document.createTextNode(nombres.price);
        nombreScreen.insertAdjacentElement("beforeend",precioScreen);
        precioScreen.append(precio)
        const containerScreen=document.createElement("div");
        containerScreen.append(nombreScreen);
        allItems.push(containerScreen)
        document.body.append(...allItems)
    })
        
    }

    fetchData()

Me encuentro con el problema que la pagina no me lee el script y ya no se donde buscar el problema

y cuando entro a ver que dice me sale que no se encuentra una respuesta

y yo solo sigo los pasos del profesor, ya revise el enlace del JSON y esta bien escrito el código esta igual al de la clase, si alguien tuvo el mismo error y pudo solucionar se lo agradecería que me explicara como

Creo que me tocara ver varias veces este video, necesito instalar Jason y ver y entender como me conectare a la API y después tomare nota de como agregarlo al DOM.

Que bueno es tener clases donde podamos integrar de manera practica lo que se ha venido aprendiendo!
Excelente profesor!!

La clase con async/await y función recursiva para que la puedan analizar.

const URL = 'https://platzi-avo.vercel.app/api/avo'

//web api
// connect to server
async function fetchData() {
  const res = await fetch(URL)
  const data = await res.json()
  const array = data.data

  const dataCards = []
  let i = 0
  
  createElement()

// nodes creation
  function createElement () {
    if (array[i] === array[array.length]) {
      return dataCards
    } else {
      const image = document.createElement('img')
      const title = document.createElement('h2')
      const price = document.createElement('p')

      const container = document.createElement('div')
      container.append(image, title, price)
      dataCards.push(container)
      i++
      return createElement()
    }
  }

  document.body.append(...dataCards)
}

fetchData()

Mi versión de la tarea:

function crearFetch(){
    return new Promise(resolve =>{
        const fetch = window.fetch(url)
        resolve(fetch)
    })
}
async function cargarAppend(){
    const data = await crearFetch()
    const resJson = await data.json()
    const todosNodos = []
    // console.log(resJson)
     resJson.data.forEach(element =>{
         const img = document.createElement("img")
         const title = document.createElement("h2")
         const price = document.createElement("div")
         const container = document.createElement("div")
         container.append(img,title,price)
         todosNodos.push(container)
     })
     document.body.append(...todosNodos)
}

cargarAppend(); 

Yo casualmente estaba consumiendo una API de peliculas que encontre para un portfolio y me encontre con un problema, No se como consumir los datos en el DOM !!!

para desestructurarlo de una vez

getData()
async function getData(){
const result = await fetch(‘https://platzi-avo.vercel.app/api/avo’);
const { data } = await result.json();

       console.log(data)
   }

Si alguien tiene el problema, que no recarga la pagina. Lamento informarles que tiene que ver primero el curso: https://platzi.com/clases/prework-windows/

Se agradece mucho que nos enseñen buenas practicas como el método de pasar a un array cada container.

Llamada al API con Async/Await

// ASYNC / AWAIT
const fetchData = async () => {
  try {
    const respuesta = await fetch(url);
    const responseJson = await respuesta.json();

    console.log(responseJson);
  } catch (error) {
    console.log(error);
  }
};

fetchData();

Listo con asyc await:

const API_URL = 'https://platzi-avo.vercel.app/api/avo'

const fetchData = async () => {
  const response = await window.fetch(API_URL)
  const jsonResponse = await response.json()
  const data = jsonResponse.data
  const allItems = []

  for (const item of data) {
    const image = document.createElement('img')
    document.body.appendChild(image)

    const title = document.createElement('h2')
    document.body.appendChild(title)
    
    const price = document.createElement('div')
    document.body.appendChild(price)

    const container = document.createElement('div')
    container.append(image, title, price)

    allItems.push(container)
  }

  document.body.append(...allItems)
}

fetchData() 

mi codigo en async/await

const callApi = async (url)=>{
    try {
        const response = await window.fetch(url);
        const dataJson = await response.json();
        console.log(dataJson);
        
    } catch (error) {
        console.log('erro');
    }
    
}

Toda promesa debería tener un capturador de errores:

window
    .fetch(url)
    // procesar respuesta y convertir en json
    .then(response => response.json())
    // Json -> Data, renderizar items en la vista
    .then(responseJson => {
        responseJson.data.forEach(item => {
            const allItems = [];
            // crear imagen
            const image = document.createElement('img');
            // crear título
            const title = document.createElement('h2');
            // crear precio
            const price = document.createElement('div');
            // crear Contenedor
            const container = document.createElement('div');
            container.append(image, title, price);
            allItems.push(container);
        });
        document.body.appendChild(allItems);
    })
    // Capturar error
    .catch(err => console.log(`Ha ocurrido un error de tipo: ${err}`));