Lista de categorías

Clase 6 de 17 • Curso de API REST con Javascript: Ejemplos con APIs reales

Hiram Rodriguez Gomez

student•

Por defecto, el idioma en que nos devuelve las categorías es en inglés. Para mostrar las categorías en español, después de la API Key es necesario agregar

&language=es

para que los nombres de las categorías aparezcan en español. La URL completa debe quedar similar a esto:

https://api.themoviedb.org/3//genre/movie/list?api_key=<TU_API_KEY>&language=es

Jonathan Guidi

student•

Buen aporte! Gracias!!

Christopher David Erazo Herrera

student•

Les comparto por el momento esta de esta forma cargando las categorias y tendencias

oscar Ivan Toro Gonzalez

student•

que poder mi bro como lo hiciste?

maximo galarza

student•

hola, tuve un problema con lo que pasaba era esto:

este era el código:

y encontré esta solución con css grid:

y este es el codigo:

Josue Cerron Tuesta

student•

Gracias!

Carlos Rodríguez

student•

Mi aporte con el repositoio github:

Mi respositorio

Brandon Argel Verdeja Domínguez

student•

Así va quedando mi proyecto. Este es el repo. Desktop:

Mobile:

Dario Paladines

student•

Bueno, asi quedo mi versión de categorias, lo realizé inclusive antes de terminar de ver la clase completa y me salió a la primera :)

Juan Castro

teacher•

:clap:

Jorge Garcia

student•

yo lo llevaba asi pero viendo que son muchas categorias me tocara rediseñar mi menu de categorias...

Jesús Emmanuel Jimenez Brito

student•

Hardcodear es escribir código que deberia ser automatizado o código que debería ser obtenido por el usuario final y no por el desarrollador

Diego Iberri Ramírez

student•

esta es la manera correcta de agregar las categorias en idioma español:

async function getCategoriesPreview() {
    const res = await fetch ('https://api.themoviedb.org/3/genre/movie/list?api_key=' + API_KEY + '&language=es');
}

Diego Eduardo Téllez Contreras

student•

Así va quedando el mio!

Rigoberto Maldonado

student•

Vamos genial. Comparto mi avance..

detalles y ya.

Cayo Legal

student•

Yo creo que es mas eficiente usar textContent o innerText en vez de TextNode

Juan Castro

teacher•

Perfectamente válido :D

Walter Marvin Rodriguez Sanchez

student•

excelente clase

Cristian Paiva

student•

Que lindo se esta poniendo este curso. No esperaba menos de JuanDC!!! Gracias maestro :)

Eduardo Rodriguez Yapur

student•

Otra forma de realizar la funcion getMoviesCategories:

async function getMoviesCategories(){    
    const res =await fetch(`https://api.themoviedb.org/3/genre/movie/list?api_key=8usda933asdahhreew33423`);
    const data=await res.json();
    console.log(data);
    categories=data.genres;
    console.log(categories);
    categories.forEach(category => {       
        const categoryContainer=`
                            <div class="category-container">
                                <h3 id="id${category.id}" class="category-title">${category.name}</h4>
                            </div>                            
        `;
        const html = document.querySelector('#categoriesPreview .categoriesPreview-list').innerHTML;
        document.querySelector('#categoriesPreview .categoriesPreview-list').innerHTML=categoryContainer+html;                
    });
}

José Luis Encastin Flores

student•

Aguas con dejar tu API_KEY bro, en openSource no pasa nada, pero en APIs como las de google te pueden endeudar en un rato.

Christian Velázquez

student•

Lo único que le agregué de más fie en la "API_KEY", el lenguaje ( Español)

&language=es-Mx

David Guerrero Diaz

student•

Asi lo estoy quedando con vanilla javascript :D

import getCategories from "../utils/getCategories";

const CategoriesPreview = async () => {
  const categoriesMovies = await getCategories();
  const categories = categoriesMovies.genres;

  categories.forEach((category) => {
    const categoriesPreviewContainer = document.querySelector(
      "#categoriesPreview .categoriesPreview-list"
    );
    categoriesPreviewContainer.innerHTML += `
        <div class="category-container">
            <h3 id="id${category.id}" class="category-title">${category.name}</h4>
        </div>`;
  });
};

export default CategoriesPreview;

Christian Velázquez

student•

Gracias por tu aporte. Me faltaba un "id", para que me salieran los colores.

Jorge Campero

student•

Una pregunta, en el codigo de CSS como supo juan que ID llevaria cada categoria, que procedimiento tomo para saber la informacion?

Juan Castro

teacher•

Ir categoría por categoría recolectándolos manualmente No es lo mejor, idealmente debería haber un endpoint para consultar todas las categorías con sus respectivos colores

Gilbert Ardila

student•

me hago un apregunata, me puedes explicar la diferencia de insertar el texto en el h3 usando createTextNode o innerText, gracias

Juan Castro

teacher•

Mira esta comparación: https://www.geeksforgeeks.org/difference-between-textcontent-and-innertext/

Gilbert Ardila

student•

ohhh, entendido!!

fabio andres zamora osorio

student•

en la parte del codigo css donde se le añade color a las categorias ¿como hago para conocer los numeros que se ponen en los selectores de id? lo que se me ocurre para conocer esos numeros es leer el atributo id del json de la peticion ya que en dicho atributo id es donde se muestran los numeros de id de cada categoria, osea, que eso quiere decir que para poder crear esa parte del codigo css primero debo hacer la peticion a la api para poder conocer los numeros de id ¿esto es correcto o no? . la parte del codigo css a la que me refiero es esta:

#id28 { --idColor: var(--yellow); }
#id12 { --idColor: var(--red); }
#id16 { --idColor: var(--green); }
#id35 { --idColor: var(--lightBlue); }

Juan Castro

teacher•

Eso fue --literal y lastimosamente-- manual. Solo hice un console.log del endpoint de la lista de categorías, los llevé al CSS y le puse un colocito a cada uno. :sweat_smile: