Lista de categorías
Clase 6 de 17 • Curso de API REST con Javascript: Ejemplos con APIs reales
Contenido del curso
Hiram Rodriguez Gomez
student•
hace 4 años
Jonathan Guidi
student•
hace 4 años
Clase 6 de 17 • Curso de API REST con Javascript: Ejemplos con APIs reales
Contenido del curso
Hiram Rodriguez Gomez
Jonathan Guidi
Christopher David Erazo Herrera
oscar Ivan Toro Gonzalez
maximo galarza
Josue Cerron Tuesta
Carlos Rodríguez
Brandon Argel Verdeja Domínguez
Dario Paladines
Juan Castro
Jorge Garcia
Jesús Emmanuel Jimenez Brito
Diego Iberri Ramírez
Diego Eduardo Téllez Contreras
Rigoberto Maldonado
Cayo Legal
Juan Castro
Walter Marvin Rodriguez Sanchez
Cristian Paiva
Eduardo Rodriguez Yapur
José Luis Encastin Flores
Christian Velázquez
David Guerrero Diaz
Christian Velázquez
Jorge Campero
Juan Castro
Gilbert Ardila
Juan Castro
Gilbert Ardila
fabio andres zamora osorio
Juan Castro
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
Buen aporte! Gracias!!
Les comparto por el momento esta de esta forma cargando las categorias y tendencias
que poder mi bro como lo hiciste?
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:
Gracias!
Mi aporte con el repositoio github:
Mi respositorio
Así va quedando mi proyecto. Este es el repo. Desktop:
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 :)
:clap:
yo lo llevaba asi pero viendo que son muchas categorias me tocara rediseñar mi menu de categorias...
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
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'); }
Así va quedando el mio!
Vamos genial. Comparto mi avance..
detalles y ya.
Yo creo que es mas eficiente usar textContent o innerText en vez de TextNode
Perfectamente válido :D
excelente clase
Que lindo se esta poniendo este curso. No esperaba menos de JuanDC!!! Gracias maestro :)
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; }); }
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.
Lo único que le agregué de más fie en la "API_KEY", el lenguaje ( Español)
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;
Gracias por tu aporte. Me faltaba un "id", para que me salieran los colores.
Una pregunta, en el codigo de CSS como supo juan que ID llevaria cada categoria, que procedimiento tomo para saber la informacion?
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
me hago un apregunata, me puedes explicar la diferencia de insertar el texto en el h3 usando createTextNode o innerText, gracias
Mira esta comparación: https://www.geeksforgeeks.org/difference-between-textcontent-and-innertext/
ohhh, entendido!!
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); }
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: