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>