¿Me perdí algo? Todavía recibo este registro: Uncaught (en promesa) TypeError: photos.forEach no es una función. No tengo idea de lo que estoy haciendo mal.
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); }}
Según la documentación , la respuesta se sirve como
{ "total": 133, "total_pages": 7, "results": [ //Photos here ] }Entonces deberías cambiar la función 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); }); }