This is the first complex bit of code I’ve written on my own!
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
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>
thanks but stackoverflow is NO help, ever. And this does have to do with p5, I’m working on it based on a p5 youtube tutorial. Edit: to be clear, it is specifically the jerks at stackoverflow that discourage me from even wanting to learn how to code. If you can offer some useful forum for beginner coders I would post there, but stackoverflow is a bunch of hyper aggressive misogynist ***holes.
Based on suggestions I’ve rewritten my code using fetch.
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 just staying on page 1:
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>
