Question

未捕获的类型错误：data.forEach 不是 XMLHttpRequest.request.onload 上的函数

2020-08-19

3371

javascript arrays json

我尝试与 restcountries.eu api 建立连接。我的 javascript 代码：

var request = new XMLHttpRequest()
var arr = []
request.open('GET', 'https://restcountries.eu/rest/v2/alpha/col', true)
request.onload = function () {
  // Begin accessing JSON data here
  var data = JSON.parse(this.response)

  data.forEach((countries) => {  
    arr.push(countries.name)
  })

  var selectBox = document.getElementById('test')
  for(var i = 0; i < arr.length; i++){
    selectBox.options.add(new Option(arr[i], arr[i]));
  }     
}
    
request.send()

我收到以下错误：Uncaught TypeError：data.forEach 不是函数在 XMLHttpRequest.request.onload 中使用 foreach 函数的那一行。我之前解析过数据，所以不知道哪里出错了。这个问题有解决办法吗？

Answer 1

如果您想使用数据变量中项目的值，则应首先将值转换为数组。要获取对象值的数组，您可以执行以下操作：

Object.values(data).forEach(item=>{
    arr.push(item.name);
});

请记住， .forEach() 仅适用于数组 。因此，只要您有一个值数组，就可以使用 Object.values(yourObjectHere) 来获取其值的数组。我认为 bluejayke 提到 Object.keys(yourObjectHere) 返回其键（属性）的数组。

Answer 2

URL https://restcountries.eu/rest/v2/alpha/col 上的数据不是数组，而是 JavaScript 对象。如果您想使用 forEach 遍历其属性，则必须在解析的数据上调用 Object.keys 或 Array.from 之类的方法，例如

Object.keys(data).forEach((k) => {  
  arr.push(data[k].name)
})

Answer 3

您正在查询特定国家/地区，具体来说是哥伦比亚。我认为您的目标是根据国家/地区列表创建一个选项列表。在这种情况下，您需要将请求网址更改为 https://restcountries.eu/rest/v2 以接收您可以迭代的完整国家/地区列表。