调用restcountries.eu API时遇Uncaught TypeError: data.forEach is not a function错误求助

嘿，我来帮你搞定这个报错！你遇到的问题根源其实很直观：你调用的/alpha/col接口返回的是单个国家的对象，而不是数组，所以forEach方法（只有数组才有的方法）自然没办法在对象上执行，这就是报错的原因。

为什么会这样？ #

当你通过restcountries.eu的/alpha/{code}接口查询单个国家代码（比如col代表哥伦比亚）时，接口返回的是一个单独的JSON对象，结构大概是这样的：

{
  "name": "Colombia",
  "alpha2Code": "CO",
  "alpha3Code": "COL",
  // ...其他国家信息
}

而不是包含多个对象的数组，所以data.forEach就会抛出类型错误。

解决办法 #

根据你的需求，分两种情况处理：

情况1：只需要获取单个国家的信息

直接去掉forEach，直接访问对象的name属性即可，修改后的代码如下：

var request = new XMLHttpRequest()
request.open('GET', 'https://restcountries.eu/rest/v2/alpha/col', true)
request.onload = function () {
  // 解析返回的单个国家对象
  var data = JSON.parse(this.response)
  var selectBox = document.getElementById('test')
  // 直接用data.name创建选项
  selectBox.options.add(new Option(data.name, data.name));
}
request.send()

情况2：需要获取多个国家的信息

如果你本来想批量查询多个国家，那应该使用/alpha接口的批量查询参数，用逗号分隔多个国家代码，此时接口会返回数组，forEach就能正常使用了。示例代码：

var request = new XMLHttpRequest()
var arr = []
// 用codes参数批量查询多个国家，比如哥伦比亚、美国、法国
request.open('GET', 'https://restcountries.eu/rest/v2/alpha?codes=col,usa,fra', true)
request.onload = function () {
  var data = JSON.parse(this.response)
  // 此时data是数组，可以正常使用forEach
  data.forEach(country => {
    arr.push(country.name)
  })
  var selectBox = document.getElementById('test')
  arr.forEach(name => {
    selectBox.options.add(new Option(name, name));
  })
}
request.send()

内容的提问来源于stack exchange，提问作者Saderk