Estoy tratando de mostrar imágenes de Unsplash en tarjetas.
Las tarjetas se crean utilizando JavaScript.
Los 10 objetos de la API Unsplash se muestran en la consola.
Sin embargo, parece que no puedo encontrar el problema de por qué las tarjetas y las imágenes de API Unsplash no se muestran.
Agradezco cualquier ayuda, gracias.
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();Arreglemos la parte del bucle for;
El uso de foreach() debe ser con E mayúscula como .forEach() que causa un error y su prop de objetos de respuesta tenía un nombre diferente.
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); }; }