es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Muévase a la siguiente página en una API paginada solo cuando se haga clic en el botón “siguiente” hasta llegar a la última página (totalPages).

Muévase a la siguiente página en una API paginada solo cuando se haga clic en el botón “siguiente” hasta llegar a la última página (totalPages).

26 Jul, 2023 Programación

Estoy utilizando una API de búsqueda de TMDB que tiene datos de películas respectivas, como nombre, imagen, descripción, etc.
Entonces, cuando busco una palabra clave “Nueva York”, la API devuelve todas las películas que contienen la palabra “Nueva York”. La API está paginada y solo muestra 20 resultados por página. Además, mi HTML también está paginado y muestra 20 resultados por página. Lo que deseo lograr es que cuando haga clic en el botón siguiente de la paginación HTML, la API se active con &page=2 y muestre los resultados de la página 2 de la API en la página HTML 2.

Código para obtener datos de la primera página de la API:

const buscarPeliculas = function (valorBusqueda) {
  let pagina = 1;

  do {
    fetch(urlAPIBusqueda + "&query=" + valorBusqueda + "&page=" + pagina)
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        let totalPages = data.total_pages;

        let resultadosBusqueda = data.results;
        console.log(resultadosBusqueda);
        iniciarBusquedaPeliculas(resultadosBusqueda);
      });
  } while (totalPages);
};

El botón siguiente:
const btnSiguiente = document.getElementById("btn-siguiente");
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para implementar la funcionalidad de activar la API con page=2 cuando se hace clic en el botón siguiente de la paginación HTML, debes agregar un event listener al elemento del botón siguiente. Dentro de la función del event listener, debes actualizar la variable page al número de página siguiente y luego obtener los datos de la API utilizando el número de página actualizado. Luego puedes pasar los datos obtenidos a una función que renderice los resultados actualizados en la página HTML.

    Aquí está el código para lograr esto:

    let page = 1;
let totalPages = 0;
let searchResults = [];

const searchMovies = function (searchValue) {
  fetch(searchAPIURL + "&query=" + searchValue + `&page=${page}`)
    .then((response) => response.json())
    .then((data) => {
      totalPages = data.total_pages;
      searchResults = data.results;
      searchMovieInit(searchResults);
    });
};

const nextBtn = document.getElementById("next-btn");
nextBtn.addEventListener("click", () => {
  if (page < totalPages) {
    page++;
    searchMovies(searchValue);
  }
});

    Algunas cosas importantes a tener en cuenta aquí:

    • He movido las variables page, totalPages y searchResults fuera de la función searchMovies, para que puedan ser accedidas y actualizadas dentro de la función del event listener de clic.
    • He eliminado el bucle do while, ya que no es necesario en este escenario. Solo necesitamos obtener los datos una vez por página, cuando el usuario hace clic en el botón “Siguiente”.
    • En la función del event listener de clic, he agregado una condición para verificar si hemos llegado a la última página. Si no hemos llegado, actualizamos la variable page y llamamos nuevamente a la función searchMovies con el searchValue actualizado.
    • Finalmente, ten en cuenta que la función searchMovies ahora solo obtiene los datos de la API una vez por llamada, por lo que no necesitamos recorrer las páginas en un bucle. En su lugar, pasamos los datos obtenidos a la función searchMovieInit, que se encarga de renderizar los resultados en la página HTML.

Comments are closed.