XMLHttpRequest请求restcountries API字段显示[object Object]报错

不需要使用JSON.stringify处理数据。出现[object Object]的核心原因是：模板字符串插值时如果传入对象类型，JS会默认将其转换为"[object Object]"字符串。你代码中直接引用了接口返回的上层嵌套对象，没有取到对象内部的具体基础类型值（字符串、数字），才会导致渲染异常、图片路径报错。
另外你的代码存在一个语法问题：console.log(data.flags)是JS执行语句，不能写在反引号包裹的HTML模板字符串内部，需要放到模板外面。

接口返回的异常字段均为嵌套结构，对应取值方式如下：

• 国旗：data.flags是存储多格式图片地址的对象，图片路径取具体属性即可，比如png格式地址为data.flags.png，svg格式为data.flags.svg
• 国家名称：data.name是存储多语言名称的对象，通用国名取data.name.common，官方全称取data.name.official
• 语言：data.languages是键值对结构，键为语言编码、值为语言名称，可通过Object.values(data.languages)提取所有语言名后拼接
• 货币：data.currencies是键值对结构，键为货币编码、值为包含货币名、货币符号的对象，提取对应属性拼接即可
• 地区、人口字段本身是基础类型，直接引用不会报错，人口数值过大可按需格式化。

const request = new XMLHttpRequest();
request.open('GET','https://restcountries.com/v3.1/name/portugal');
request.send();

request.addEventListener('load',function() {
  const [data] = JSON.parse(this.responseText);
  console.log(data);

  // 提前处理嵌套字段，取出可直接渲染的基础类型值
  const flagSrc = data.flags.png;
  const countryName = data.name.common;
  const languageText = Object.values(data.languages).join('、');
  const currencyInfo = Object.values(data.currencies)[0];
  const currencyText = `${currencyInfo.name}（${currencyInfo.symbol}）`;
  // 人口单位转为万，不需要可直接使用data.population
  const populationText = `${(data.population / 10000).toFixed(0)} 万`;

  const html = `
  <article class="country">
    <img class="country__img" src="${flagSrc}"/>
    <div class="country__data">
      <h3 class="country__name">${countryName}</h3>
      <h4 class="country__region">${data.region}</h4>
      <p class="country__row"><span>👫</span>${populationText}</p>
      <p class="country__row"><span>🗣️</span>${languageText}</p>
      <p class="country__row"><span>💰</span>${currencyText}</p>
    </div>
  </article>
  `;

  // 此处编写将html插入页面DOM的逻辑
  console.log(data.flags);
});

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