Итерация по массиву API, data.forEach не является функцией - PullRequest
Новая
       14

Итерация по массиву API, data.forEach не является функцией

0 голосов
/ 03 мая 2019

Вчера я пытался получить некоторую помощь, но у меня не было достаточного освещения реальной проблемы, и я не давал большую часть своего кода, но здесь мы снова.Не обращайте внимания на мое плохое понимание кодирования, пожалуйста:).

Я пытаюсь перебрать ответ API GET, который находится в jSON.Но я застрял в цикле forEach, как вы можете видеть в коде.Вот сообщение об ошибке: Uncaught (в обещании) TypeError: data.forEach не является функцией index.js: 26

Вот весь код JavaScript: 

"use strict";

window.addEventListener('load', () => {

  let form = document.getElementById('search-form');
  let content = document.getElementById('content');
  let searchField = document.getElementById('search');

  form.addEventListener('submit', event => {
    event.preventDefault();
    search(searchField.value);
  });
});

/**
 * Makes a request to https://restcountries.eu/rest/v2/name/{query} .
 * @param {string} query The user’s search query
 * @param {HTMLElement} content The <tbody> element that the result will be printed to
*/

function search(query, container) {
  window.fetch('https://newsapi.org/v2/top-headlines?country=' + encodeURIComponent(query) + "&apiKey=blabla")
    .then(response => response.json())
    .then(data => {
      console.log(data);
      data.forEach(item => {
        createArticlesHolders(item, container);
      })
    });
}

function createArticlesHolders(newsData, container) {

  let card = document.createElement('div');
  card.className= "card";
  card.style.width = "20rem";
  content.appendChild(card);

  let cardTitle = createElement("h5");
  cardTitle.className = "card-title";
  cardTitle.textContent = newsData.title;
  card.appendChild(cardTitle);

  let cardImg = document.createElement("img");
  cardImg.className = "card-img-top";
  cardImg.setAttribute('src', newsData.urlToImage);
  card.appendChild(cardImg);

}

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

What I 'Я пытаюсь сделать так, чтобы, когда кто-то искал код страны в окне поиска, некоторые из главных новостей появлялись для страны.Затем код должен создавать элементы с классами начальной загрузки.

Вот console.log (data);

image

Ответы [ 3 ]

1 голос
/ 03 мая 2019

Вы не можете перебрать json, используя forEach. Для этой цели вы можете использовать, например, Object.keys() или for...in цикл - итерация по ключам верхнего уровня, т. Е. 

...
keys = Object.keys(data);
keys.forEach(key => {
    createArticlesHolders(data[key], container);
})
...

или 

...
for (let key in data) {
    createArticlesHolders(data[key], container);
}
...

Edit:
Не уверен, что data равно json или array - если второе, вам, очевидно, следует повторить его раньше.

0 голосов
/ 03 мая 2019

Вы должны включить печать для console.log(data). Но независимо от того, просто прочитайте сообщение об ошибке, data.forEach не является функцией; следовательно, data не является массивом.

0 голосов
/ 03 мая 2019

Данные являются обычным объектом, у которого нет метода forEach. Вы должны пройти через свойство объекта. 

let data = {
  "articles": [
    {
      "author": "Author 1"
    },
    {
      "author": "Author 2"
    },
    {
      "author": "Author 3"
    }
  ]
}

data.articles.forEach((obj) => {
  console.log(obj.author)
});
...