I am pulling 12 photos from flickr api, I need to display 3 photos then 10 seconds later show another 3 and so forth. I know i can use the setTime out function but not sure how to randomize the array of obj?
function makeFetchRequest(lat, long) {
let HTTP = `https://shrouded-mountain-15003.herokuapp.com/https://flickr.com/services/rest/?api_key=${API_KEY}&format=json&nojsoncallback=1&method=flickr.photos.search&safe_search=1&per_page=12&lat=${lat}&lon=${long}&text=${searchWord}`;
const response = fetch(HTTP)
.then((response) => {
//console.log(response);
return response.json();
})
.then((data) => {
const photosArr = data.photos.photo;
console.log(photosArr);
// for (let x = 0; x < photosArr.length; x++) {
// //console.log(photosArr[x]);
// displayResults(
// photosArr[x].farm,
// photosArr[x].server,
// photosArr[x].id,
// photosArr[x].secret,
// photosArr[x].owner,
// photosArr[x].title
// );
// }
photosArr.forEach((pics) => {
displayResults(pics.farm, pics.server, pics.id, pics.secret, pics.owner, pics.title);
});
});
return response;
}
function displayResults(farmID, serverID, id, secret, owner, title) {
const photo = document.querySelector('.photo-container');
photo.innerHTML = `
<div class="row">
<div class="col s12 m6">
<div class="card hoverable img-card">
<div class="card-image">
<img src="https://farm${farmID}.staticflickr.com/${serverID}/${id}_${secret}.jpg">
<a href="https://www.flickr.com/photos/${owner}/${id}/" target="_blank" class="btn-floating halfway-fab waves-effect waves-light blue center">visit</a>
</div>
<div class="card-content">
<span class="card-title">${title}</span>
<p>Message goes here </p>
</div>
</div>
</div>
</div>
</div>
`;
}