Fetching countries data through XMLHTTPRequest using the countries API gettting [object object]error-CodePudding

Fetching the data through this API https://restcountries.com/v3.1/name/portugal. For couple of fields i.e flag,name,currency getting [object object]

XMLHTTPRequest

const request = new XMLHttpRequest();
// Here we need URL for AJAX calls
//request is an object
// Type of Request - GET
request.open('GET','https://restcountries.com/v3.1/name/portugal');
// open the request
//we have to send this request to the url to fetch the data
request.send();

//We need request call back on the load. callback function
request.addEventListener('load',function() {

// converting json file to normal text.

const [data] = JSON.parse(this.responseText);
console.log(data);

const html=`
<article >
<img  src="${data.flags}"/>
console.log(data.flags);
<div >
  <h3 >${data.name}</h3>
  <h4 >${data.region}</h4>
  <p ><span>