I am using a TMDB Search API which has data of respective movies i.e. name, image, descrp. etc. So when I search for a keyword "New York" the API returns all the movies which has the word "New York" in it. The API is paginated and only returns 20 results per page. Also my HTML is also paginated and shows 20 results per page. What I want to achieve is when I click on the next button of the HTML pagination, the API should be triggered with &page=2 and render the results of API page 2 on the HTML page 2.
Code to retrieve data from the first page of the API
const searchMovies = function (searchValue) {
let page = 1;
do {
fetch(searchAPIURL + "&query=" + searchValue + `&page=${page}`)
.then((response) => response.json())
.then((data) => {
console.log(data);
let totalPages = data.total_pages;
let searchResults = data.results;
console.log(searchResults);
searchMovieInit(searchResults);
});
} while (totalPages);
};
The next button
const nextBtn = document.getElementById("next-btn");
I add an disabled class to everything -1 and removed the disable class to anything in front off the current page. And everytime someone clicks on the next button pageCall gets called which takes the next number and and recalls the getmovies function with "https://api.themoviedb.org/3/trending/tv/week?api_key=###&page=2" as the url
The pageCall function splits the url in "https://api.themoviedb.org/3/trending/tv/week?" "api_key=###&page=2" which makes the array urlsplit
Then it Splits the "api_key=###&page=2" which is urlspilt[1] in "api_key=###" and "page=2" which is called queryParams and then it takes the querys and splits the one with the lenght of the queryparams-lenght - 1
const prev = document.getElementById("prev");
const next = document.getElementById("next");
const current = document.getElementById("current");
let currentPage = 1;
let NextPage = 2;
let prevPage = 3;
let lastUrl = "";
let totalpages = 100;
function getMovies(url) {
lastUrl = url;
fetch(url)
.then(res => res.json())
.then(data =>
if (data.length !== 0) {
showMovies(data.results);
currentPage = data.page;
NextPage = currentPage + 1;
prevPage = currentPage - 1;
totalpages = data.total_pages;
current.innerText = currentPage;
if (currentPage <= 1) {
prev.classList.add("disabled");
next.classList.remove("disabled");
} else if (currentPage >= totalpages) {
prev.classList.remove("disabled");
next.classList.add("disabled");
} else {
prev.classList.remove("disabled");
next.classList.remove("disabled");
}
}
});
}
next.addEventListener("click", () => {
if (NextPage <= totalpages) {
pageCall(NextPage);
}
});
prev.addEventListener("click", () => {
if (prevPage > 0) {
pageCall(prevPage);
}
});
function pageCall(page) {
let urlsplit = lastUrl.split("?");
let queryParams = urlsplit[1].split("&");
let key = queryParams[queryParams.length - 1].split("=");
if (key[0] != "page") {
let url = lastUrl + "&page=" + page;
getMovies(url);
} else {
key[1] = page.toString();
let a = key.join("=");
queryParams[queryParams.length - 1] = a;
let b = queryParams.join("&");
let url = urlsplit[0] + "?" + b;
getMovies(url);
}
}