CODEWITHSUNDEEP
javascriptloopspaginationfetch
mrKorny
mrKorny

Reputation: 91

Pagination, variable inside function for a loop

I have little problem with my function fetch with api. I have variable currentPage outside function popular(), in that case everything works, but when Im trying declare inside function popular() that variable to get increment, then my number is still 1. Is there any way to get increment without declaring a global variable but with use local? After pressing the button (nextPage ()) the number of currentPage ++ should increase each time.

let currentPage = 1;   <--- //global variable(I dont want)

popular();
function popular(page) {

        fetch("https://api.themoviedb.org/3/movie/popular?api_key=xxxxxxxxxxxxxxxxxxx&page="+ page+"")
        .then(resp => resp.json())
        .then(resp => {

            movieApi = resp;
            movieResult = resp.results;
            maxLenght = resp.total_pages;
            document.getElementById("movie-section").innerHTML = `${movieResult.map(movieCard).join("")}`;
            document.getElementById("btns-container").innerHTML = paginationCont();
            shortText();
            function paginationPage(){

                console.log("maxLenght " +maxLenght);

                const btnNext = document.getElementById("nextBtn");
                const btnPrev = document.getElementById("prevBtn");
                function prevPage() {

                    if (currentPage > 1) {
                        currentPage--;
                        popular(currentPage);
                    }
                }
                function nextPage() {
                    if (currentPage < maxLenght) {
                        currentPage++;  <-- //it does not work when it declares inside
                        popular(currentPage);

                    }
                }


                btnNext.addEventListener("click", nextPage);
                btnPrev.addEventListener("click", prevPage);

            }
            paginationPage();
        });
    }

Upvotes: 0

Views: 324

Answers (2)

trincot
trincot

Reputation: 350781

You can actually do without the value of currentPage, since you already have the page parameter which is local:

popular(1);
function popular(page) {
    // ...etc ...
    // ...
    function prevPage() {
        if (page > 1) popular(page-1);
    }
    function nextPage() {
        if (page < maxLenght) popular(page+1);
    }
    // ...
}

NB: you might want to review the spelling of the maxLenght variable ;-)

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371019

The issue is that you need access to a persistent variable in order to keep track of the current page between popular calls. If you don't want a global variable, but are OK using an outer variable, one option is to create a currentPage variable which is only scoped to popular, and can't be seen or altered elsewhere: use an IIFE that declares currentPage and returns the current popular function:

const popular = (() => {
  let currentPage = 1;
  return (page) => {
    fetch( ...
    // ...
    // put the rest of the big function here
  };
})();
// make sure to call `popular` for the first time *after* the IIFE:
// function declarations are hoisted, but IIFEs are not
popular();

While currentPage is not local inside the (page) => { function, it achieves what you're looking for without any unnecessary global pollution.

Upvotes: 0

Related Questions