One instance involves the use of the fetch API to retrieve data from the NY Times API. Within the response, there is an object titled "Multimedia" containing images. I've devised a template literal to extract the required information but for some reason, the images are not loading properly. VIEW DEMO ON CODEPEN Below is my code:
const div = document.getElementById('article'),
url = "https://api.nytimes.com/svc/topstories/v2/home.json?api-key=fd168d666e644fe29bbb534d757b374e";
fetch(url)
.then((response) => {return response.json(); })
.then(data => {
let article = data.results;
console.log(article);
return article.map(user => {
let output = '<div class="container">';
article.forEach(user => {
output += `
<article>
<img src="${user.multimedia.url}">
<h2>${user.title}</h2>
<span class="author"><b>Author:</b> ${user.byline} | <b>Category: </b>${user.section}</span>
<p>${user.abstract}</p>
<a class="btn" href="${user.url}" target="_blank">View Article</a>
</article>
`
});
document.getElementById('article').innerHTML = output;
})
})
.catch( error => { console.log(error); })
%body
#articleI have attempted to access the images using user.multimedia.url but unfortunately, they are not displaying. Any assistance or insight into why this issue persists would be greatly appreciated. Thank you!