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

La URL utilizada:
https://rickandmortyapi.com/api/character/

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

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

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

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

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

• 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!

Hola, comunidad. Quiero recomendar el curso de postman ( Platzi); además, recomendar esta otra herramienta llamada: “Thunder Client”. Sirve para lo mismo pero, en Visual Studio Code.

• https://www.thunderclient.com/

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;

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

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;

🤯🤯🤯🤯🤯🙌

indent-rainbow

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;

“porque 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