如何获得对象的元素？

Question

我想从API终结点（https://restcountries.eu/rest/v2/all）到达对象的元素，更确切地说是“ currencies”中的“ name”，但它始终返回undefined。

我尝试使用currency.name和currency [“ name”]，但这些都不起作用。

const countries = document.getElementById('countries');

var request = new XMLHttpRequest();

request.open('GET', 'https://restcountries.eu/rest/v2/all', true);

data.forEach(name => {
        const h1 = document.createElement('h1');
        h1.textContent = name.capital; //this one works just fine

        const h2 = document.createElement('h2');
        h2.textContent = name.currencies.name; //the problem is in here

        countries.appendChild(h1);
        countries.appendChild(h2);
 });

例如，我想获取“阿富汗阿富汗尼”，而不像以前那样未定义。

Answer 1

您的问题在于currencies是一个数组。

您必须说name.currencies[0].name，或者如果您有多种货币，则必须遍历数组以获取所有货币。

Answer 2

问题在于货币是一个数组。

例如，您应该使用c urrencies[0].name来获取第一种货币的名称。

Answer 3

您可以执行以下操作，而不必担心一个国家的货币是否超过一种：

const countries = document.getElementById('countries');
const request = new XMLHttpRequest();

request.open('GET', 'https://restcountries.eu/rest/v2/all', true);

request.onload = function (e) {
  if (request.readyState === 4) {
    if (request.status === 200) {

      const data = JSON.parse(request.responseText);

      data.forEach(function(item){

        //add country
        const h1 = document.createElement('h1');
        h1.textContent = item.name; 
        countries.appendChild(h1);

        //add currencies
        item.currencies.forEach(function(currency){
          const h2 = document.createElement('h2');
          h2.textContent = currency.name; 
          countries.appendChild(h2);
        });

      });  

    } else {
      console.error(request.statusText);
    }
  }
};

request.onerror = function (e) {
  console.error(request.statusText);
};

request.send(null);