How to dynamically change API search parameters?

This is the first complex bit of code I’ve written on my own! :partying_face:

I access the API, search for any image with “hand” in the title, download the data, and then display an image and it’s title from an array. And there’s a button to click to go to the next image.

However, it only returns an array of 10 records per page, along with a link to the next page. My question is how could I change the parameters of my query dynamically in order to utilize that link to the next page?

    <body>
        <div id="myDiv" style="margin: auto; width: 50%; text-align: center;">
            <div id="title"></div>
            <img id="showImg" src="" style="width: 50%"/>
        </div>
        <div id="nextDiv" style="margin: auto; width: 50%; text-align: center;">
            <button id="nextBtn">next</button>
        </div>
      
<script>
            
            //set vars, perform query and return the data
            var apiEndpointBaseURL = "REDACTED"; //sets the endpoint
            var queryString = $.param({ //sets the parameters of the query
                apikey: "REDACTED",
                page: 1,  //sets page number of the records being returned
                size: "10", //sets max number of records I'm asking to be returned in an array
                title: "hands"
            });
             
            //retrieve data and display a record
            $.getJSON(apiEndpointBaseURL + queryString, function getRecords(data) {               
                console.log(data);  //log all the data
                
                var nextPage = data.info.next;  //contains a link to the next page
                var recNum = 0;    //display first record in the array
                var imgUrl = data.records[recNum].primaryimageurl;  //assign imageurl
                var title = data.records[recNum].title;    //assign the corresponding title

                document.getElementById("showImg").src=imgUrl;   //display img and title
                document.getElementById("title").innerHTML=title; 
                console.log(recNum, title, imgUrl);  //log what is being seen
                
                //click button to show next image in array
                document.getElementById("nextBtn").addEventListener("click", function nextImg() {
                    recNum++; //increment the array index on click
                    if(recNum==data.records.length){recNum=0;}  //reset index to 0 if recNum reaches the end of records. BUT NEED TO MOVE TO NEXT PAGE TOO.
                    imgUrl = data.records[recNum].primaryimageurl;  //assign new img url
                    title = data.records[recNum].title;   //assign new title
                    for(; imgUrl === null || imgUrl === undefined;){   //if imageurl is null or undefined increment recNum and reassign
                        recNum++;
                        imgUrl = data.records[recNum].primaryimageurl;  //reset the image url
                        title = data.records[recNum].title;   //reset the title
                        console.log("entry skipped/no image url!");    //log if an entry is skipped
                    }                         
                    document.getElementById("showImg").src=imgUrl;  //display new image and title
                    document.getElementById("title").innerHTML=title; 
                    console.log(recNum, title, imgUrl);     //log new image and title
                });                 
    
            });
            
        </script>
        
    </body>

Just checking to see if anyone has any advice on this or how to improve the question. I know it’s a difficult question to pose on the forum as a beginner but Im just confused as to how I would implement an update to the page number I’m retrieving images from, once it reaches the end of the page. Thanks!

Move your button event listener outside of the query code and update the search params as a global variable after each query. Something like this:

  var apiEndpointBaseURL = "REDACTED"; //sets the endpoint
        var queryString = $.param({ //sets the parameters of the query
            apikey: "REDACTED",
            page: 1,  //sets page number of the records being returned
            size: "10", //sets max number of records I'm asking to be returned in an array
            title: "hands"
        });
        document.getElementById("next").addEventListener("click", function () {
            query()
        })
        //click button to show next image in array
      

        function query() {
            //retrieve data and display a record
            $.getJSON(apiEndpointBaseURL + queryString, function getRecords(data) {
                console.log(data);  //log all the data

                var nextPage = data.info.next;  //contains a link to the next page
                var recNum = 0;    //display first record in the array
                var imgUrl = data.records[recNum].primaryimageurl;  //assign imageurl
                var title = data.records[recNum].title;    //assign the corresponding title

                document.getElementById("showImg").src = imgUrl;   //display img and title
                document.getElementById("title").innerHTML = title;
                console.log(recNum, title, imgUrl);  //log what is being seen
                

                // Update query string variables
                queryString.title = title
                queryString.page ++


            });
        }

p.s: I think questions like this are better to be posted on Stackoverflow than this forum since this forum is dedicated to p5js

1 Like