国家名称无法正常显示，为何出现[object Object]？附代码示例

原因 #

你看到的[object Object]是因为Rest Countries API返回的country.name并非字符串，而是一个包含多个字段的对象（比如common是通用名称，official是官方名称）。当你直接在模板字符串中插入对象时，JavaScript会自动调用对象的toString()方法，默认返回[object Object]。

解决办法 #

你需要从name对象中提取具体的名称字段，比如通用名称common：

修改代码中的这一行：

output += `<option>${country.name}</option>`;

改为：

output += `<option>${country.name.common}</option>`;

如果需要显示官方名称，就替换为country.name.official。

修改后的完整代码：

document.addEventListener('DOMContentLoaded', () =>{

  const selectDrop = document.querySelector('#countries');
 
  
  fetch('https://restcountries.com/v3.1/all').then(res => {
    return res.json();
  }).then(data => {
      let output = "";
    data.forEach(country => {
      output += `<option>${country.name.common}</option>`;
    })
    selectDrop.innerHTML = output;
  }).catch(err => {
    console.log(err);
  })
  
  });

这样下拉框就能正常显示国家名称了。

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