Attempting to retrieve data from an API and insert it into the DOM
In this case, the data is in the form of an array containing objects.
Here's a sample of what the API displays in the console.
https://i.sstatic.net/MLKya.png
To access the array within the object, I am utilizing both a for loop and a for...in loop
Check out the code snippet below
const getNews = document.getElementById('btn')
heyThere = () => {
axios.get('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=APIKEY')
.then(function (response) {
for (let i = 0; i <= response.data.articles.length; i++) {
for (key in response.data.articles[i]) {
ham.innerHTML = (response.data.articles)
}
}
console.log(response)
console.log(typeof response)
})
.catch(function (error) {
console.log(error);
})
}
getNews.addEventListener('click', heyThere)The code above will display the following on the DOM
https://i.sstatic.net/7zSBi.png
What is the appropriate method to access the entire list of articles (20 articles) and showcase them on the DOM?