Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript How to dynamically change API search parameters?

warpigs666

New Coder
Hi all. Nothing I have tried will allow me to get to update the queryString page in order to move to the next page once the list of image records has reached the end. I'm trying to update the queryString.page by incrementing it in the nextImage function (queryString.page++) when the 'next image' button is clicked but it's just staying on page 1:


Code:
<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: "god",
                //classification: "Paintings"
                });
           
            var myQuery = apiEndpointBaseURL + queryString;
            var theData
            var recNum = 0;                                            //display first record in the array

                        fetch(myQuery)                                                  //the query
            .then(function(theResponse) {
                return theResponse.json();
            })
            .then(function(theObj){
                theData = theObj;
            })
            .catch(function(theErrors){
                console.log("oh no an error!");
            })
            .then(function(){
               displayImg();
             });
         
            function displayImg(){
                 console.log(theData);
             
                var url = theData.records[recNum].url;
                var imgUrl = theData.records[recNum].primaryimageurl;      //assign imageurl var
                var title = theData.records[recNum].title;                 //assign the corresponding title
                var nextPage = theData.info.next;
             
                for(; imgUrl === null || imgUrl === undefined{            //if imageurl is null or undefined increment recNum and reassign
                    recNum++;
                    imgUrl = theData.records[recNum].primaryimageurl;       //reset the image url
                    title = theData.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, url);                            //log what is being seen
            }
         
            //click button to show next image in array.
            document.getElementById("nextBtn").addEventListener("click", function() {nextImg()});
         
            function nextImg(){                                                  
                    recNum++;
                    imgUrl = theData.records[recNum].primaryimageurl;              //assign new img url
                    title = theData.records[recNum].title;                         //assign new title
                    for(; imgUrl === null || imgUrl === undefined{        //if imageurl is null or undefined increment recNum and reassign
                        recNum++;
                        if(recNum==theData.records.length){recNum=0; queryString.page++; fetch(myQuery);};    //NEED TO MOVE TO NEXT PAGE SOMEHOW!
                        imgUrl = theData.records[recNum].primaryimageurl;          //reset the image url
                        title = theData.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>
 
Its not allowing me to edit my post so here is updated code:

Code:
Nothing I have tried will allow me to get to update the queryString page in order to move to the next image. I'm trying to update the queryString.page by incrementing it in the nextImage function (queryString.page++) when the 'next image' button is clicked but it's showing a page change in the console.log but the images are just staying on page 1:

        <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 = {                                           //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: "god",
                //classification: "Paintings",  //list of label parameters and values (or use "any" value) https://api-toolkit.herokuapp.com/classification
                //culture: "Mesopotamian",   
                //worktype: "videotape",
                };
            var theQuery = Object.keys(queryString).map(function(k) {
                                return encodeURIComponent(k) + '=' + encodeURIComponent(queryString[k])
                            }).join('&');
            var urlAndQuery = apiEndpointBaseURL + theQuery;
            var theData
            var recNum = 0;                                                 //display first record in the array
            
            
            fetch(urlAndQuery)                                                  //the query
            .then(function(theResponse) {
                return theResponse.json();
            })
            .then(function(theObj){
                theData = theObj;
            })
            .catch(function(theErrors){
                console.log("oh no an error! " + theErrors   );
            })
            .then(function(){
               displayImg();
             });
            
            function displayImg(){
                 console.log(theData);
                
                var url = theData.records[recNum].url;
                var imgUrl = theData.records[recNum].primaryimageurl;      //assign imageurl var
                var title = theData.records[recNum].title;                 //assign the corresponding title
                var nextPage = theData.info.next;
                
                for(; imgUrl === null || imgUrl === undefined;){            //if imageurl is null or undefined increment recNum and reassign
                    recNum++;
                    imgUrl = theData.records[recNum].primaryimageurl;       //reset the image url
                    title = theData.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, url);                            //log what is being seen
            }
            
            //click button to show next image in array.
            document.getElementById("nextBtn").addEventListener("click", function() {nextImg()});
            
            function nextImg(){                                                   
                    recNum++;
                    imgUrl = theData.records[recNum].primaryimageurl;              //assign new img/rec url
                    title = theData.records[recNum].title;                         //assign new title
                    for(; imgUrl === null || imgUrl === undefined;){               //if imageurl is null or undefined increment recNum and reassign
                        recNum++;
                        if(recNum==theData.records.length){recNum=0; queryString.page++; fetch(urlAndQuery); console.log(queryString);};    //NEED TO MOVE TO NEXT PAGE SOMEHOW!
                        imgUrl = theData.records[recNum].primaryimageurl;          //reset the image url
                        title = theData.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>
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom