使用countries gettting [object ]错误通过XMLHTTPRequest获取国家数据

Question

通过这个API https://restcountries.com/v3.1/name/portugal获取数据。对于两个字段，即标志、名称、货币获取对象

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 class="country">
<img class="country__img" src="${data.flags}"/>
console.log(data.flags);
<div class="country__data">
  <h3 class="country__name">${data.name}</h3>
  <h4 class="country__region">${data.region}</h4>
  <p class="country__row"><span></span>${data.population}</p>
  <p class="country__row"><span>️</span>${data.languages}</p>
  <p class="country__row"><span></span>${data.currencies}</p>
</div>
</article>
`;

对于国旗图像获取不能获得/object%20Object其他字段也不能对象%20 object。

我必须使用JSON.stringify吗？

任何帮助都很感激。

谢谢，阿吉特

Answer 1

我觉得你应该这么做

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

从const数据中删除方括号并使用索引0获取

Answer 2

用于data.flags属性的src属性本身是一个对象，而不是简单的URL，因为它包含png和svg格式的URL。

尝试将data.flags.png或data.flags.svg传递给src属性，它应该可以工作。

Answer 3

您需要使用适当的表示法从JSON中提取值。您可以参考下面的代码来获得更多的理解。

request.addEventListener('load', function () {
    // converting json file to normal text.
    
    const [data] = JSON.parse(this.responseText);
    console.log(data);
    
    const lang = Object.values(data.languages).join(',');
    const currencies = Object.values(data.currencies).map((c) => c.name).join(',');
    
    const html = `
    <article class="country">
    <img class="country__img" src="${data.flags.png}"/>
    <div class="country__data">
        <h3 class="country__name">${data.name.common}</h3>
        <h4 class="country__region">${data.region}</h4>
        <p class="country__row"><span></span>${data.population}</p>
        <p class="country__row"><span>️</span>${lang}</p>
        <p class="country__row"><span></span>${currencies}</p>
    </div>
    </article>
    `;
    const divEl = document.createElement('div');
    divEl.innerHTML = html;
    
    document.body.appendChild(divEl);
    console.log(html);
});