Как отобразить вложенные данные на DOM?

Question

Попытка извлечь данные из API и добавить их в DOM

В частности, массив, содержащий объекты.

Ниже приведен пример того, что API возвращает в консоли.

Я использую цикл for и цикл for… in для доступа к массиву внутри объекта

Код ниже

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)

Приведенный выше код выводит на DOM следующее:

Какой правильный способполучить доступ к полному списку статей (20 статей) и распечатать их в DOM?

Answer 1

Приведенное ниже решение печатает статьи в DOM в виде списка.

heyThere = () => {
    axios.get('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=APIKEY')
        .then(function (response) {
            let news = response.data.articles
            for (let i = 0, len = news.length; i < len; i++) {
                console.log(news[i])
                let li = document.createElement('li')
                li.innerHTML = JSON.stringify(news[i].title)
                document.querySelector('#ham').appendChild(li)
            }
        })
        .catch(function (error) {
            console.log(error);
        })
}

getNews.addEventListener('click', heyThere)

Ниже приведены статьи, напечатанные на странице

Изменение ответа с точечной нотациейпозволяет возвращать список URL-адресов, авторов и т. д. Например, li.innerHTML = JSON.stringify(news[i].url)

Надеюсь, это полезно!

Answer 2

Вам необходимо получить доступ к определенным свойствам response.data.articles[i], которые вы хотите отобразить, и создать требуемый HTML для каждого из них.Что-то вроде:

const getNews = document.getElementById('btn')

heyThere = () => {
  axios.get('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=APIKEY')
    .then(function(response) {
      let html = '';
      response.data.articles.each(article => {
        html += '<div class="article">';
        html += `<div class="author">${article.author}</div>`;
        html += `<div class="description">${article.description}</div>`;
        html += '</div>';
      });
      ham.innerHTML = html;
      console.log(response)
      console.log(typeof response)
    })
    .catch(function(error) {
      console.log(error);
    })
}

getNews.addEventListener('click', heyThere)