API Images not displaying and cards not dynamically populated

Question

I am trying to display Unsplash images on cards.

The cards are created using JavaScript.

The 10 objects from the Unsplash API is shown on the console.

However, I cannot seem to find the problem on why the cards and the API Unsplash images are not displaying.

Appreciate any help, thanks.

const resultsNav = document.getElementById('resultsNav');
const favouritesNav = document.getElementById('favouritesNav');
const imagesContainer = document.querySelector('.images-container');
const saveConfirmed = document.querySelector('.saveConfirmed');
const loader = document.querySelector('.loader');


// Unsplash API
const count = 10;
const apiKey = 'DEMO KEY';
const apiUrl = `https://api.unsplash.com/photos/random?client_id=${apiKey}&count=${count}`;

let resultsArray = [];

function updateDOM() {
  resultsArray.foreach((result) => {
    // Card Container
    const card = document.createElement('div');
    card.classList.add('card');
    // link
    const link = document.createElement('a');
    link.href = result.hdurl;

    //Images
    const image = document.createElement('img');
    image.src = result.url;
    image.alt = 'Image';
    image.loading = 'lazy';
    image.classList.add('card-img-top');
    //Card Body
    const cardBody = document.createElement('div');
    cardBody.classList.add('card-body');
    // Save Text
    const saveText = document.createElement('p');
    saveText.classList.add('clickable');
    saveText.textContent = 'Add To Favourites';

    // Append
    cardBody.append(saveText);
    link.appendChild(image);
    card.append(link, cardBody);
    imagesContainer.appendChild(card);
  });
}

//  Get 10 Images from Unsplash API
async function getUnplashPictures() {
  try {
    const response = await fetch(apiUrl);
    resultsArray = await response.json();
    console.log(resultsArray);
    updateDOM();
  } catch (error) {
    // Catch Error Here
  }
}

// On Load
getUnplashPictures();

Answer 1

Let's fix the for loop part;

foreach() usage should be with capital E as .forEach() that cause an error and your response objects prop were different named.

    let resultsArray = [];

    function updateDOM() {
        for (let result of resultsArray) {
            // Card Container
            const card = document.createElement('div');
            card.classList.add('card');
            // link
            const link = document.createElement('a');
            link.href = result.links.self;

            //Images
            const image = document.createElement('img');
            image.src = result.urls.small;
            image.alt = 'Image';
            image.loading = 'lazy';
            image.classList.add('card-img-top');
            //Card Body
            const cardBody = document.createElement('div');
            cardBody.classList.add('card-body');
            // Save Text
            const saveText = document.createElement('p');
            saveText.classList.add('clickable');
            saveText.textContent = 'Add To Favourites';

            // Append
            cardBody.append(saveText);
            link.appendChild(image);
            card.append(link, cardBody);
            imagesContainer.appendChild(card);
        };
    }