Conectar la función con la descripción de personajes

Estos cursos cortitos y prácticos son fantásticos! Permiten poner en práctica todo lo que se aprende en cursos teóricos más largos.

Si no les llegara a funcionar que les aparezca la info del personaje verifiquen que la URL de la API tenga el / al final

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

Este curso esta muy aspero!!! Creo que este y el de Jquery a Js abren un mundo de posibilidades para practicar con apps y APIs cuando uno esta comenzando.
Bien ahí!

Les comparto un problemita con el que me crucé, al momento de dar click a algún personaje no me aparecía l oque debería y me salía este error en consola:

El problema era que a la ruta de la API le faltaba un “/”, lo lo escribía así:

Y debería ser así:

Y voilà:

Lo cierto es que sí hay un refresh cuando se hace clic en la palabra 100tifi.co que está en el Header. Para evitarlo, cambien el valor del atributo href a # en vez de /:

<a href="#">100tifi.co</a>

De esta manera, el evento hashchange, que ejecuta la función router, es disparado.

Se continúa con el curso.

Me pueden apoyar con este error, me muestra el listado de personajes, pero al dar clic en uno especifico no muestra los detalles. Al inspeccionar el elemento me muestra estos errores la consola:

TypeError: character is undefined (main.js line 469 > eval:13:25)

Fetch Error SyntaxError: “JSON.parse: unexpected character at line 1 column 1 of the JSON data” (getData.js:12:13)

Mi archivo 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; 	

**
Mi archivo Characters.js**

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

const Character = async () => {
    const id = getHash();
    const character = await getData(id);
    const view = `
    <div class="Characters-inner">
        <article class="Characters-card">
            <img src="${character.image}" alt="${character.name}">
            <h2>${character.name}</h2>
        </article>
        <article class="Characters-card">
            <h3>Episodes: <span>${character.episode.length}</span></h3>
            <h3>Status: <span>${character.status}</span></h3>
            <h3>Species: <span>${character.species}</span></h3>
            <h3>Gender: <span>${character.gender}</span></h3>
            <h3>Origin: <span>${character.origin.name}</span></h3>
            <h3>Last Location: <span>${character.location.name}</span></h3>
        </article>
    </div>
    `;

    return view;
};

export default Character;

Solo me linkea el primer personaje, los demás renderiza el nombre y la foto pero no me da acceso a los detalles.

src/pages/Character.js

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

const Character = async () => {
    const id = getHash();
    const character = await getData(id);
    const view = `
    <div className="Characters-inner">
        <article className="Characters-card">
            <img src=${character.image} alt="${character.name}"/>
            <h2>${character.name}</h2>
            <article className="Characters-card">
                <h3>Episodes: <span>${character.episode.length}	</span></h3>
                <h3>Status: <span>${character.status}</span></h3>
                <h3>Species: <span>${character.species}</span></h3>
                <h3>Gender: <span>${character.gender}</span></h3>
                <h3>Origin: <span>${character.origin.name}</span></h3>
                <h3>Last location: <span>${character.location.name}</span></h3>
            </article>
        </article>
    </div>
    `;
    return view;
}

export default Character;

Tenia el sgt problema: daba clic a un personaje y la URL cambiaba pero el contenido de la web no.

solucion: habia exportado los templates HOME y Character con parentesis al final y en el /routes no habia puesto los parentesis!

UNA HORA buscando un error de por qué no hacía fetch la data, me saltaba el catch de getData
Hasta que veo que usé comillas simples ’ ’ en vez de
Nada, eso
xd

tuve errores pero bueno se soluciono y sirvió 😄

Los typos son hell cuando no los encuentras,jajaja pero justo cuando das con ello se vuelve el heaven, 😃

SUPER !!!

Yo vengo del curso basico de Vue y al ver este otro, se estoy sintiendo muy bien afianzando conocimientos y relacionando, ya que este es como funciona React y Vue por debajo. Excelente.

uff mi cerebro me duele :c

Qué curso tan genial!!!

Caharacter.js

import getHash from '../utils/getHash'
import getData from '../utils/getData'

const Character = async() => {

    const id = getHash();
    const character = await getData(id);
    const view = `
    <div class="Characters-inner">
        <article class="Characters-card">
            <img src="${character.image}" alt=""${character.name}">
            <h2>${character.name}</h2>
        </article class="Character-card">
            <h3>Episodes: <span>${character.episode.length}</span></h3>
            <h3>Status:  <span>${character.status}</span></h3>
            <h3>Species:  <span> ${character.species}</span></h3>
            <h3>Gender:   <span>${character.gender}</span></h3>
            <h3>Origin:  <span> ${character.origin.name}</span></h3>
            <h3>Last Location :  <span> ${character.location.name}</span></h3>
        <article>

        </article>
    </div>`;
    return view;

};
export default Character;```

Genial, todo claro.

Esto está muy genial

Es cierto que frameworks y librerías como React abstraen bastante el proceso de armado de una SPA, pero me pregunto si realmente vale la pena todo el hype que generan siendo JavaScipt vainilla una opción tan poderosa y completa. Hacer este curso me demostró lo impresionante que por sí mismo puede ser JavaScript.

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

const Character = async () => {
    const id = getHash();
    const character = await getData(id);

    const view = `
    <div class="Characters-inner">
        <article class="Character-card">
            <img src="${character.image}" alt"${character.name}">
            <h2>${character.name}</h2>
        </article>
        <article class="Character-card">
            <h3>Epsiodes:<span>${character.episode.length}</span></h3>
            <h3>Status:<span>${character.status}</span></h3>
            <h3>Species:<span>${character.species}</span></h3>
            <h3>Gender:<span>${character.gender}</span></h3>
            <h3>Origin:<span>${character.origin.name}</span></h3>
            <h3>Last Location:<span>${character.location.name}</span></h3>
        </article>
    </div>
    `;
    return view;
};

export default Character;```

ok muy bueno el curso

Vamos Genial 😄

Genial. que gran curso, como yo lo veo es como una introducción muy básica de lo que sigue, React, Vue, Angular

Me encanta como va quedando ❤️

Conectar la función con la descripción de personajes

Ahora debemos editar el archivo Character.js para mostrar el resultado del personaje.

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

const Character = async () => {
    const id = await getHash();
    const character = await getData(id);

    const view = `
    
    <div class="Character-inner">
        <article class="Characters-card">
            <img src="${character.image}" alt="${character.name}">
        </article>
        <h2>${character.name}</h2>

        <article class="Character-card">
            <h3>Episode: <span>${character.episode.length}</span></h3>
            <h3>Status: <span>${character.status}</span></h3>
            <h3>Species: <span>${character.species}</span></h3>
            <h3>Gender: <span>${character.gender}</span></h3>
            <h3>Origin: <span>${character.origin.name}</span></h3>
            <h3>Last Location: <span>${character.location.name}</span></h3>

        </article>

    </div>
    
    `
    return view;
}

export default Character;

Class 12: Conectar la función con la descripción de personajes

pages
	character.js

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

const Characer = async () => {
    const id = getHash();
    const character = await getData(id);
    const view = `
        <div class="Characters-inner">
            <article class="Characters-card">
                <img src="${character.image}" alt="${character.name}">
                <h2>${character.name}</h2>
            </article>
            <article class="Characters-card">
                <h3>Episodes: <span>${character.episode.length}</span></h3>
                <h3>Status: <span>${character.status}</span></h3>
                <h3>Species: <span>${character.especies}</span></h3>
                <h3>Gender: <span>${character.gender}</span></h3>
                <h3>Origin: <span>${character.origin.name}</span></h3>
                <h3>Last Location: <span>${character.location.name}</span></h3>
            </article>
        </div>
    `;
    return view;
}

export default Characer;

Lo logré hacer solo y no estuvo tan diferente

Banda estuve como 2 horas buscando un error y resulto siendo que escribi .lenght en lugar de .length en el archivo resolveRoutes.js Me quiero volver changoooo!!!

Es de los pocos profesores que pongo en velocidad 1x

Ya esta funcionando la App, trae los personajes y los muestra correctamente. Vamos a configurar un archivo CSS para mejorar la presentación.

Copié el código del profesor desde github y sigue saliendo “Error 404”. No era problema de mi código, alguien me puede ayudar?

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

const Character = async () => {
  const id = getHash();
  const character = await getData(id);
  const view = `
    <div class="Characters-inner">
      <article class="Characters-card">
        <img src="${character.image}" alt="${character.name}">
        <h2>${character.name}</h2>
      </article>
      <article class="Characters-card">
        <h3>Episodes: <span>${character.episode.length}</span></h3>
        <h3>Status: <span>${character.status}</span></h3>
        <h3>Species: <span>${character.species}</span></h3>
        <h3>Gender: <span>${character.gender}</span></h3>
        <h3>Origin: <span>${character.origin.name}</span></h3>
        <h3>Last Location: ${character.location.name}</h3>
      </article>
    </div>
  `;
  return view;
};

export default Character;

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;