Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Filtrando películas por categoría

11/17
Recursos

Aportes 5

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

The best comment " Esa película es horrible" jajaja

¿Qué opinan de esta solución?
.

No sé si más adelante lo corrige el profe, pero al momento de entrar en una categoría que contiene un espacio en su título nos encontramos esto:

Pero pues lo podemos solucionar con un simple replace:p

Me quise adelantar a la clase y hice el filtro por las peliculas en tendencia jajaja F

const filterCategoriesMovies =  async (category) => {


    const {data} = await API.get('trending/movie/day')
    const movies = data.results

    const filterMovies = movies.filter(movie => movie.genre_ids.includes(category))

    genericSection.innerHTML = ""

    filterMovies.forEach(movie => {

        const movieContainer = document.createElement('div')
        movieContainer.classList.add('movie-container')

        const img = document.createElement('img')
        img.src = `https://image.tmdb.org/t/p/w300/${movie.poster_path}`
        img.title = movie.original_title
        img.alt = movie.original_title
        img.classList.add('movie-img')

        movieContainer.appendChild(img)
        genericSection.appendChild(movieContainer)
    })

    headerCategoryTitle.style.after = filterMovies.length

}

const getCategories = async () => {

    const {data} = await API.get('genre/movie/list')
    const categories = data.genres
     categoriesPreviewList.innerHTML = ""
     categories.forEach(category => {
      const categoryName = document.createElement('h3')
        categoryName.classList.add('category-title')
        categoryName.textContent = category.name 
        categoryName.id = `id${category.id}`
        categoryName.onclick =  () => {

            location.hash = `category=${category.id}-${category.name}`
            headerCategoryTitle.textContent = `Results for ${category.name.toLowerCase()} movies` 
            filterCategoriesMovies(category.id)
        }

        categoryContainer.appendChild(categoryName)
        categoriesPreviewList.appendChild(categoryContainer)
    })
}

La solución del profe en la unión del id con el nombre de la categoría se conoce como un slug de dos variables, id and name.
.
La solución que yo agregado para tener los id y el name de la categoría en cada nodo es agregando un dataset la adición del atributo ‘data-namedataset’, esto es para hacer que el contenedor agreguemos un solo evento y aplciar la delegación de eventos detectando el target que sería en este caso el h3.
.
Es recomendable hacerlo así para optimizar carga de eventos y no hacerlo en cada loop.

getNode.categoriesPreviewList.addEventListener('click', (e) => {
    const target = e.target;
    if (target && target.nodeName === 'H3') {
        const categoryContainerNode = target.parentNode;
        const categoryID = categoryContainerNode.dataset.categoryid;
        const categoryName = categoryContainerNode.dataset.categoryname.toLowerCase();
        window.location.hash = `category=${categoryID}-${categoryName}`;
    }
});

.
Mi Repositorio