遍历 API 数组，data.forEach 不是函数答案

【问题标题】：Iterate through an API-array, data.forEach is not a function遍历 API 数组，data.forEach 不是函数
【发布时间】：2019-05-03 13:54:31
【问题描述】：

我昨天试图获得一些帮助，但我没有太多涉及真正的问题，也没有提供我的大部分代码，但我们又来了。请不要因为我对编码的理解不佳而激怒我:)。

我正在尝试循环访问一个 API GET 响应，它在 JSON 中。但是正如您在代码中看到的那样，我陷入了 forEach 循环。这是错误消息： Uncaught (in promise) TypeError: data.forEach is not a function 在 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')
})

我想要做的是，当有人在搜索框中搜索国家/地区代码时，会出现该国家/地区的一些头条新闻。然后代码应该使用引导类创建元素。

这是 console.log(data);

【问题讨论】：

Array.prototype.forEach() 仅适用于数组类型，请确保您的 api 将数据作为数组返回，您可能必须将其解析为关于响应的正确格式。跨度>
能否包含console.log(data)的输出？
@Ank 给你。
截图刚刚在顶部剪掉了一些重要的东西：数组位于data的属性中，而不是data本身，它是一个普通对象。
data.articles.forEach也是如此

标签： javascript json ajax api iteration

【解决方案1】：

您不能使用forEach 迭代json。为此，您可以使用例如Object.keys() 或 for...in 循环 - 迭代顶级键，即：

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

或

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

编辑：
不确定data 是json 还是array - 如果是第二个，显然你应该先对其进行迭代。

【讨论】：

我似乎对此有所了解，谢谢。
但现在我得到一个新错误：net::ERR_FILE_NOT_FOUND 这是什么意思？
你能多贴一点错误日志吗？应该有一个指示什么文件无法加载。
我明白了，现在一切都好。感谢您提供简单的代码行。

【解决方案2】：

您应该包括console.log(data) 的打印。但不管怎样，只要阅读错误信息，data.forEach 不是函数；因此，data 不是一个数组。

【讨论】：

【解决方案3】：

数据是一个没有 forEach 方法的常规对象。您应该遍历对象的属性。

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

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

【讨论】：