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

3 Likes

Sorry I never saw this! Thank you so much. I will work on it and report back.

1 Like

Ok… so I realize it’s been a couple months, and I’ve been reading and have learned alot. However… I still can’t figure out this (probably simple) thing. Here is the code I have working. I just want to move to the next page after the last image is reached, which can be achieved by using data.info.next which gives me a url for the next page. I just can’t get anything to work though. I’ve tried incorporating your suggestions but it causes other problems, so I’m posting my full working code here.

    <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, this returns all resources in the 'objects' category
            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, up to 100, default is 10. The records are randmoized each call?
                title: "hands",
                //classification: "Paintings",  //list of label parameters and values (or use "any" value) https://api-toolkit.herokuapp.com/classification
                //culture: "Mesopotamian",   
                //worktype: "videotape",
                });
             
            //retrieve data and display a record
            $.getJSON(apiEndpointBaseURL + queryString, function getRecords(data) {               
                console.log(data);                                      //log all the data
                
                var recNum = 0;                                         //display first record in the array
                var imgUrl = data.records[recNum].primaryimageurl;      //assign imageurl var
                var title = data.records[recNum].title;                 //assign the corresponding 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 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++;
                    if(recNum==data.records.length){recNum=0;}                  //reset counter to 0 if recNum reaches the end of records. NEED TO MOVE TO NEXT PAGE SOMEHOW!
                    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>

sorry but it seems it has nothing to do with p5.js so I suggest asking the question on other forums like stackoverflow. Good luck!