I can't seem to display the JSON data I fetched on my HTML webpage. The data is coming in correctly, but for some reason, it's not showing up. There might be an issue with how I'm handling the objects and arrays.
Any help would be appreciated.
const API_URL = 'https://api.unsplash.com/search/photos?page=1&client_id=00000000000';
const form = document.querySelector('form');
const input = document.querySelector('input');
const loadingImage = document.querySelector('#loadingImage');
const imageSection = document.querySelector('.image');
loadingImage.style.display = 'none';
form.addEventListener('submit', formSubmitted);
function formSubmitted(event) {
event.preventDefault();
const searchTerm = input.value;
searchStart();
search(searchTerm)
.then(displayImages)
.then(() => {
loadingImage.style.display = 'none';
});
}
function searchStart() {
loadingImage.style.display = '';
imageSection.innerHTML = '';
}
function search(searchTerm) {
const url = `${API_URL}&query=${searchTerm}`;
loadingImage.style.display ='';
return fetch(url)
.then(function(response) {
return response.json();
});
}
function displayImages (images) {
images.forEach(results => {
const imageElement = document.createElement('img');
imageElement.src = results[0].urls.full;
imageSection.appendChild(imageElement);
});
}
Example response
{
"total": 8083,
"total_pages": 809,
"results": [
{
"id": "qY9zgRqmNtA",
"created_at": "2018-03-27T11:42:54-04:00",
"updated_at": "2018-08-28T20:56:16-04:00",
"width": 6435,
"height": 4290,
"color": "#FCFDFD",
"description": "people working inside white and black room",
"urls": {
"raw": "https://images.unsplash.com/photo-1522165078649-823cf4dbaf46?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjM4NDEyfQ&s=7d8696c868ca2cea4d2b337d0f42f6c1",