Did i missed something? Im still getting this log: Uncaught (in promise) TypeError: photos.forEach is not a function. No idea what Im doing wrong.
async fetchImages(baseURL){
const response = await fetch(baseURL, {
method: 'GET',
headers:{
Accept: 'application/json',
Authorization: this.API_KEY
}
});
const photos = await response.json();
return photos;
}
GenerateHTML(photos){
photos.forEach(photo => {
const item = document.createElement('div');
item.classList.add('item');
item.innerHTML = `
<a href='#'>
<img src="${photo.urls.small}">
<h3>${photo.user.name}</h3>
</a>
`;
this.galleryDiv.appendChild(item);
});
}
async getSearchedImages(e){
e.preventDefault();
const searchValue = e.target.querySelector('input').value;
const baseURL = await `https://api.unsplash.com/search/photos?page=1&query=${searchValue}&client_id=${this.API_KEY}`
const photos = await this.fetchImages(baseURL);
this.GenerateHTML(photos);
}
}
According to the documentation, the response is served as
{
"total": 133,
"total_pages": 7,
"results": [
//Photos here
]
}
So you should change the function GenerateHTML
GenerateHTML(photos){
photos.results.forEach(photo => {
const item = document.createElement('div');
item.classList.add('item');
item.innerHTML = `
<a href='#'>
<img src="${photo.urls.small}">
<h3>${photo.user.name}</h3>
</a>
`;
this.galleryDiv.appendChild(item);
});
}