I am implementing chained Fetch to fetch images relevant to the articles. Initially, I retrieve the titles of the articles and then utilize the Unsplash API to obtain the appropriate images.
The issue arises when I receive my result not as an object, but only as a promise. My goal is to fill the div with the "results" id containing the object returned from the async function within the cards variable. Despite trying to incorporate Timeout, the outcome remains unchanged.
async function getPrograms(params) {
url = 'http://127.0.0.1:8000/articles/api/?'
url2 = 'https://api.unsplash.com/search/photos?client_id=XXX&content_filter=high&orientation=landscape&per_page=1&query='
const program = await fetch(url + params).then(response => response.json());
this.program = program;
const cards = await program.results.map(async result => {
// Objects that I need to populate card. Ex. title, description, date updated etc. Additionally, including images below (solely returning images for testing):
let images = await fetch(url2 + result.title).then(response => response.json())
return images
});
this.cards = cards;
const printAddress = async () => {
const a = await cards;
return a
};
document.getElementById('results').innerHTML = printAddress()
};
Note: Despite referring to tutorials and Stack Overflow answers, I have yet to find a suitable solution to my problem.