No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Descargando informaci贸n y creando nodos

12/28
Recursos

Aportes 133

Preguntas 48

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

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 馃槂

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

Un poco m谩s gr谩fico para entenderlo mejor 馃ぃ

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 鈥渏uan 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/)

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 鈥淛SON 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.

Async / Await + Destructuring ```js const url = "https://platzi-avo.vercel.app/api/avo"; const avocados = async () => { const response = await fetch(url); const { data } = await response.json(); data.map((item) => { const container = document.createElement("div"); const imagen = document.createElement("img"); const title = document.createElement("h2"); const price = document.createElement("div"); container.append(imagen, title, price); document.body.append(container); }); }; avocados(); ```
Async / Await + Destructuring ```js const url = "https://platzi-avo.vercel.app/api/avo"; const avocados = async () => { const response = await fetch(url); const { data } = await response.json(); data.map((item) => { const container = document.createElement("div"); const imagen = document.createElement("img"); const title = document.createElement("h2"); const price = document.createElement("div"); container.append(imagen, title, price); document.body.append(container); }); }; avocados(); ```*const* url = "https://platzi-avo.vercel.app/api/avo"; *const* avocados = *async* () *=>* { *const* response = *await* fetch(url); *const* { data } = *await* response.json(); console.log(data); data.map((item) *=>* { *const* container = document.createElement("div"); *const* imagen = document.createElement("img"); *const* title = document.createElement("h2"); *const* price = document.createElement("div"); container.append(imagen, title, price); document.body.append(container); });}; avocados();
隆Cuanta blancura!!!! ![](data:image/jpeg;base64,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)
![](https://www.google.com/imgres?q=bob%20esponja%20ojos%20quemados\&imgurl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FGQ8kBzTST9w%2Fmaxresdefault.jpg\&imgrefurl=https%3A%2F%2Fwww.reddit.com%2Fuser%2FOscareose%2Fcomments%2Fo2x1jq%2Fcomo_ver_la_descripcion_de_un_video_de_youtube_pc%2F\&docid=SsLCzZWAFCMIrM\&tbnid=yzbn2VWJICVYQM\&vet=12ahUKEwiM9NPs_5OGAxUbQzABHTyPD7oQM3oECFIQAA..i\&w=1280\&h=720\&hcb=2\&ved=2ahUKEwiM9NPs_5OGAxUbQzABHTyPD7oQM3oECFIQAA)隆Cuanta blancura!!!! ![](https://www.google.com/imgres?q=bob%20esponja%20ojos%20quemados\&imgurl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FGQ8kBzTST9w%2Fmaxresdefault.jpg\&imgrefurl=https%3A%2F%2Fwww.reddit.com%2Fuser%2FOscareose%2Fcomments%2Fo2x1jq%2Fcomo_ver_la_descripcion_de_un_video_de_youtube_pc%2F\&docid=SsLCzZWAFCMIrM\&tbnid=yzbn2VWJICVYQM\&vet=12ahUKEwiM9NPs_5OGAxUbQzABHTyPD7oQM3oECFIQAA..i\&w=1280\&h=720\&hcb=2\&ved=2ahUKEwiM9NPs_5OGAxUbQzABHTyPD7oQM3oECFIQAA)![]()![](data:image/jpeg;base64,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)![](https://static.platzi.com/media/user_upload/image-d2aa1c61-a5d3-43e7-9458-5611e876a374.jpg)

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);
}
Mi codigo, seperando responsabilidades /\*\*聽\* 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/api/avo'; async function fetchData (url) {聽 聽 try{聽 聽 聽 聽 const response = 聽await fetch(url);聽 聽 聽 聽 const {data} = await response.json();聽 聽 聽 聽 renderInfo(data);聽 聽 }聽 聽 catch(err){聽 聽 聽 聽 console.error('Error al leer la peticion',err);聽 聽 }} function renderInfo(data){聽 聽 if(isTypeArray(data)){聽 聽 聽 聽 const todosLosItems = \[];聽 聽 聽 聽 data.forEach(element => {聽 聽 聽 聽 聽 聽 const imagen = document.createElement('img');聽 聽 聽 聽 聽 聽 const title = document.createElement('h3');聽 聽 聽 聽 聽 聽 const price = document.createElement('div'); 聽 聽 聽 聽 聽 聽 const container = 聽document.createElement('div');聽 聽 聽 聽 聽 聽 container.append(imagen,title,price);聽 聽 聽 聽 聽 聽 todosLosItems.push(container);聽 聽 聽 聽 });聽 聽 聽 聽 document.body.append(...todosLosItems);聽 聽 }} function isTypeArray(array) {聽 聽 if(array){聽 聽 聽 聽 return Array.isArray(array);聽 聽 }聽 聽 return;} fetchData(url);
```js const URL_BASE = "https://platzi-avo.vercel.app/api/avo"; const getData = async () => { try { // fetch: web api para hacer peticiones http const response = await fetch(`${URL_BASE}`); const data = await response.json(); console.log(data); } catch (error) { console.log(error); } }; getData() ```
Otra forma de hacer el request http `const URL_BASE = "https://platzi-avo.vercel.app/api/avo";` ``const getData = async () => { try { // fetch: web api para hacer peticiones http const response = await fetch(`${URL_BASE}`); const data = await response.json(); console.log(data); } catch (error) { console.log(error); }};`` `getData()`

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

es la segunda vez que veo el video y menos claro me queda ahora.... soy el 煤nico o es normal?
//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

Me est谩 costando entender un poco la parte donde el agrega el Item y despu茅s hace un ciclo para los Item, ahora bien, c贸mo se relaciona el item con la API? c贸mo sabe Javascript que al colocar Item.name se habla de la data del API?

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