A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Obtener personajes con la funci贸n de llamado a la API

11/16
Recursos

Aportes 63

Preguntas 11

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

para los que tenian duda de por que utiliza el .join(麓麓) aqui les va el por que.
Si no lo ponen se va a imprimir en la pantalla la comma que separa cada elemento

Definitivamente necesito profundizar m谩s en JavaScript, es muy interesante lo que se puede hacer con 茅l.

Me encant贸 la forma de iterarlo, yo todo noob hubiera hecho un for jajaja

Si est谩n siguiendo la escuela de desarrollo web, les hago un peque帽o pero alentador spoiler鈥

As铆 funciona React 馃槺, no me saben la alegr铆a que me dio ver esto.

const API = 'https://rickandmortyapi.com/api/character/';

const getData = async (id) => {
    const apiUrl = id ? `${API}${id}` : API;
    try {
        const response = await fetch(apiUrl);
        const data = await response.json();
        return data;
    } catch (error) {
        console.log('Fetch Error', error);
    };
};

export default getData;```
  • Algo que no me quedaba claro era como obtenia los datos de la url para hacer la peticion, y la respuesta es, que en esta clase no lo hace, hace la peticion en general de los personajes. Si escribes la direccion de la api en tu navegador veras como te regresa el json de esos 20 personajes. En esta clase no nos metemos con los datos que el navegador o la url nos provee, solo hacemos una peticion desde home al api/characters y lo acomodamos mediante el componente de home.
  • Creo que me sirve filosofar de que estamos haciendo en cada clase

Wauuu de una sin error.

Perfecto! En el curso de jQuery a JavaScript se hace algo parecido lo cu谩l ayuda a entender mejor esta clase!

A quien le pasar谩 lo mismo, me retornaba [Object Promise].
As铆 que lo solucion茅 con:

render().then(render => {
    content.innerHTML=render
  })

Espero a alguien le sirva

Parece magia 馃槂

Hola, hice el ejercicio con la API de pokem贸n, hay que hacerlo un poquito diferente pues el primer llamado a la API de pokemon solo nos trae el nombre y una url de la info de cada pokemon, para esto entonces lo que hice fue hacer una logica para acceder a todos los datos de cada pokemon, dejo y repo para que chequeen : ) https://github.com/amaurysg/SPA-PokeApi

Un gusto traer datos de de Apis y jugar con esos 馃槂

Si ya constarstaron todos los javascripts y estan identicos, no sale error en la consola y aun aun asi no les sale las imagenes, debe ser la estructura del index.html, to digo porque me paso y perdi un buen rato en eso 馃槮

src/pages/Home.js

import getData from '../utils/getData';

const Home = async () => {
    const characters = await getData();
    const view = `
    <div class="Characters>
        ${characters.results.map((character) => `
            <article class="Character-item">
                <a href="#/${character.id}/">
                    <img src=${character.image} alt="${character.name}"/>
                    <h2>${character.name}</h2>
                </a>
            </article>
        `).join('')}
    </div>
    `;
    return view;
}

export default Home;

src/utils/getData.js

const API = 'https://rickandmortyapi.com/api/character/';

const getData = async (id) => {
    const apiURL = id ? `${API}${id}` : API;
    try {
        const response = await fetch(apiURL);
        const data = await response.json();
        return data;
    } catch (error) {
        console.log('Fetch Error', error);
    }
};

export default getData;
import getData from "../utils/getData";

const Home = async ()=>{
    const characters = await getData();
    const view=`
        <div class="Characters">
            ${characters.results.map(character = `
                <article class="character-item">
                    <a href="#/${character.id}/">
                        <img src="${character.image}" alt="${character.name}">
                        <h2>${character.names}<h2/>
                    <a/>
                <article/>
            `).join('')}
        <div/>
    `;
    return view;
};

export default Home;

Hola, comunidad. Quiero recomendar el curso de postman ( Platzi); adem谩s, recomendar esta otra herramienta llamada: 鈥淭hunder Client鈥. Sirve para lo mismo pero, en Visual Studio Code.

Yo despues de guardar el Codigo y ejecutarlo en el navegador y luego reso para que no me muestre ningun error

Me anim茅 a hacer la petici贸n de la informaci贸n por personaje yo solo, as铆 qued贸:

import getData from "@utils/getData";
import getHash from "@utils/getHash";

const Character = async () => {
    const id = getHash()
    const data = await getData()
    const character = data.results.find( i => i.id == id)
    

    const view = /*html*/`
        <div class="character__inner">
            <article class="character__card">
                <img src="${character.image}" alt="${character.name}">
                <h2>${character.name}</h2>
            </article>

            <article class="character__card">
                <h3>Episodes: ${character.episode.length}</h3>
                <h3>Status: ${character.status}</h3>
                <h3>Species: ${character.species}</h3>
                <h3>Gender: ${character.gender}</h3>
                <h3>Origin: <a href="${character.origin.url}">${character.origin.name}</a> </h3>
                <h3>Last Location: <a href="${character.location.url}">${character.location.name}</a></h3>
            </article>
        </div>
    
    `;
    return view;
}

Home js

import getData from '../utils/getData';

const Home = async () => {
    const characters = await getData();
    const view = `
        <div class="Characters">
            ${characters.results.map(character => `
                <article class="Characer-item">
                    <a href="#/${character.id}">
                        <img src="${character.image}" alt="${character.name}">
                        <h2>${character.name}</h2>
                    </a>
                </article>
            `).join('')}
        </div>`
    return view;
}

export default Home;


/* template base */

Es grandioso, cuando algo ya funciona, y se muestran graficamente los personajes馃槑馃榾

HELPPPPP
Revise todo el c贸digo y no encuentro ning煤n error, le铆 todos los comentarios e hice todo lo que dice en ellos y sigue sin funcionar, no entiendo porque no encuentra las rutas, alguien que me ayude 馃檹馃徏: si quieren revisar mi c贸digo les dejo el link del repositorio:

Rick and Morty

Muy buena explicaci贸n en esta clase!

Primera clase sin errores, aqu铆 est谩 pasando algo extra帽o

perfecto

import router from './routes';

window.addEventListener('load', router);
// changed in hash
window.addEventListener('hashchange', router);```

perfecto 馃槃 listo 馃槃

Gran clase, no sab铆a que se pod铆an hacer este tipo de cosas con JS puro

Vamos bien hasta el momento, esta interesante, solo he trabajado con APIs en spring boot

Buen铆simo

Cool Oscar, buena clase.

Dejo mi repositorio en el cual podr谩n encontrar una rama de cada clase.

https://github.com/ivallejo/Cientifico

https://github.com/ivallejo/Cientifico/tree/personajes

import Header from '../templates/Header';
import Home from '../pages/Home';
import Character from '../pages/Character';
import Error404 from '../pages/Error404';
import getHash from '../utils/getHash';
import resolvesRoutes from '../utils/resolvesRoutes';

// ROUTES TO BE RENDER
const  routes = {
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact',
};

//ROUTER
const router = async () => {
    // stablishing templates to dom
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();

    //
    let hash = getHash();
    let route = await resolvesRoutes(hash);
    // containing values from routes compare with the user
    let render = routes[route] ? routes[route] : Error404;
    content.innerHTML = await render();
};

export default router;```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"content="ie=edge">
    <title>Cientifico</title>
</head>

<body>
    <main class="Main">
        <header class="Header" id="header">
        </header>
            <section id="content">
                <div class="loading"></div>
            </section>
    </main>
</body>

</html>```
import getData from '../utils/getData';

const Home = async() => {
    const characters = await getData();
    const view = `
        <div class="Characters">
            ${characters.results.map(character => `
            <article class="Character-item">
                <a href="#/${character.id}/">
                    <img src="${character.image}" alt="${character.name}">
                    <h2>${character.name}</h2>
                </a>
            </article>
            `).join('')}
        <div>
    `;
    return view;
};

export default Home;```

Que genial esto. Es magia hecha c贸digo 馃槷

Excelente curso, me encanta!

馃槷 馃槷 馃槢

Muy bueno el curso esta genial

cuando usamos los templates literals `` debemos tener cuidado de no tener un typo, ya que el editor de codigo no nos gu铆a dentro de ellos.

Estupenda explicaci贸n instructor Oscar, quede impresionado con el uso de estos elementos para darle forma a la informaci贸n que se toma de la API y poder mostrarla en una p谩gina web.

Wow!!! Qu茅 divertido, de verdad. 馃槃

En este paso, puedo conectarlo con Firebase y colocar otros valores?

Home.js

import getData from '../utils/getData'

const Home = async() => {
        const characters = await getData();
        const view = `
    <div class="Characters">
    ${characters.results.map(character=>`
        <article class="Character-item">
            <a href="#/${character.id}/">
                <img src="${character.image}" alt="${character.name}">
                <h2>${character.name}</h2>
            <a/>
        </article>`
    ).join('')}
      
    </div>
    `;
    return view;

};

export default Home;

getData.js

const API = 'https://rickandmortyapi.com/api/character/'; //URL de la api


const getData = async(id) => {
    const apiURL = id ? `${API}${id}` : API; // SI ID EXISTE TRAE A API Y CONCATENA EL ID QUE ESTAS RECIBIENDO S, SI NO EXSTE TRAE TODA LA API - TODOS LOS PERSONAJES
    try { //estructura de la funcion 
        const response = await fetch(apiURL); // response hace el llamado a fecth, fecth hace el llamado a apiURL
        const data = await response.json(); // convertimos la respuesta a un objeto json
        return data;

    } catch (error) {
        console.log('Fecth Error', error);
    };
};
export default getData;```

Wooow

Yo utilic茅 el par谩metro por default y funciona igual 馃槂

const API = 'https://rickandmortyapi.com/api/character/';

const getData = async(id='') => {
  const apiURL = API+id;
  try{
    const response = await fetch(apiURL);
    const data = await response.json();
    return data;
  }catch (e){
    console.log('Fetch Error',error);
  }
}

export default getData;

驴C贸mo se identa el c贸digo seleccionado?

Al obtener la respuesta del api , devolv铆 el data.results , seguramente la api se actualiz贸.

const API = "https://rickandmortyapi.com/api/character/";

const getData = async (id) => {
  const apiURL = id ? `${API}${id}` : API;
  try {
    const response = await fetch(apiURL);
    const data = await response.json();
    return data.results;
  } catch (err) {
    console.log("Fetch Error:", new Error(err));
  }
};

export default getData;

馃く馃く馃く馃く馃く馃檶

me sale este error y ya revise mi codigo y no encuentro ning煤n problema

qu茅 creen que pueda ser?

El join es un m茅todo que nos sirve para separar elementos de un array, por defecto los elementos se separan con una coma , por lo que tenemos que remplazarlo por un string vac铆o ( .join(鈥欌) ) para que no utilice por defecto las comas.

Una forma diferente de manejas el arreglo de datos:

const Home = async () => {
  const characters = await getData();
  const arrData = characters.results.map( character => `
    <article class="Character-item">
      <a href="#/${character.id}/">
        <img src="${character.image}" alt="${character.name}">
        <h2>${character.name}</h2>
      </a>
    </article>
  `);
  const view = `
    <div class="Characters">
      ${arrData.join('')}
    </div>
  `;
  return view;
}

funciona igual no se si sea mas claro pero da un entedimiento del areglo dedatos.

Tambien puedes realizar el llamado del API de esta forma:

const getData = async (id) => {
    const apiURL = id ? `${API + id}` : API

    return await fetch(apiURL)
        .then( res => res.json())
        .then( data => data )
        .catch( err => console.log('Fetch Err', err))
}

馃槂

驴Es as铆 c贸mo se crea la web moderna? 驴A base de javascript?

Aqu铆 les dejo mi c贸digo, con la url de la API actualizada.

const API = "https://rickandmortyapi.com/api/character/";

const getData = async (id) => {
  const apiURL = id ? `${API}${id}` : API;
  try {
    const response = await fetch(apiURL);
    const data = await response.json();
    return data;
  } catch (error) {
    console.log("Error 馃槷", error);
  }
};

export default getData;

Resumen de la clase:

Obtener personajes con la funci贸n de llamado a la API

Dentro de la carpeta utils vamos a crear un archivo llamada getData.js que sera el encargado de comuniarse con la API y traer los resultado.

const API = 'https://rickandmortyapi.com/api/character/';

const getData = async (id) => {

	  // Si no viene id entonces traemos todos los personajes
	 // si viene id traemos el personaje en cuestion
    const apiUrl = id ? `${API}${id}` : API ;

    try{
        const response = await fetch(apiUrl);
        const data = await response.json();
        return data;
    }
    catch(error){
        console.error('Fetch Error',error);
    }

}

export default getData;

En el archivo Home.js vamos a hacer render de nuestro resultado.

import getData from '../utils/getData';

const Home = async () => {
    const characters = await getData();
    const view = `
    <div class="Characters>
        ${characters.results.map((character) => `
            <article class="Character-item">
                <a href="#/${character.id}/">
                    <img src=${character.image} alt="${character.name}"/>
                    <h2>${character.name}</h2>
                </a>
            </article>
        `).join('')}
    </div>
    `;
    return view;
}

export default Home;

鈥減orque previamente analizamos esta API鈥 achis previamente en que clase?

Y por fin cargaron los personajes, ya tenemos nuestra Home, vamos por mas 鈥

para que se hizo esto de poder el id en getData.js?. Pobr茅 el codigo quitando los ids y funciona de igual manera.

const getData = async (id) => {
    const apiUrl= id ? `${API}${id}`: API;

Preferi forEach() en lugar de map()

f