Restcountries API - 通过 Javascript 将货币名称动态获取到 HTML 中

Question

我是 Javascript 新手，我一直在学习如何将国家/地区的属性导入到 HTML 元素中。你们中的一些人可能会认出这段代码，它来自教程，但现在已经过时了。我一直在寻找更新的解决方案，但找不到任何解决方案。

首先我有获取数据的功能：

const getCountryData = function (country) {
  fetch(`https://restcountries.com/v3.1/name/${country}`)
  .then(response => response.json())
  .then(data => renderCountry(data[0]));
};

然后我调用该函数，提供一个国家/地区 getCountryData('czechia') 将其注入到如下元素中：

const renderCountry = function(data, className = '') {
    const html = `
<article class="country ${className}">
          <img class="country__img" src="${data.flags.svg}" />
          <div class="country__data">
            <h3 class="country__name">${data.name.common}</h3>
            <h4 class="country__region">${data.region}</h4>
            <p class="country__row">${(+data.population / 1000000).toFixed(1)} people</p>
            <p class="country__row">${data.fifa}</p>
          </div>
        </article>
`
countriesContainer.insertAdjacentHTML
('beforeend', html);
countriesContainer.style.opacity = 1;
}

这工作正常，但问题是在 HTML 的末尾，我输入 {data.fifa} 我想要该国家/地区主要货币的名称。不幸的是，数据的结构方式是，为了显示货币的名称，我首先必须调用它的简称，如下所示：

"currencies": {
"CZK": {
"name": "Czech koruna",
"symbol": "Kč"
}
},

如果我将 {data.currencies} 调用到字符串中，我只会得到一个空对象。如果我将其称为 {currencies.CZK.name}，它可以工作，但问题是，例如，如果我致电瑞典，它不会显示任何内容，因为那样它就需要是 {currencies.SEK.name }。我该如何解决这个问题？如何在不将 CZK、SEK、USD、EUR 等合并到变量中的情况下调用货币名称？

如有任何帮助，我们将不胜感激。

Answer 1

您可以将该对象转换为数组：

const currencyArray = Object.values(data.currencies)
console.log(currencyArray[0].name)

如果该国家有多种货币，只需将指数从0更改为1、2、...

Answer 2

data.currencies 是一个对象。在这种情况下要访问货币名称，可以使用 Object.values() 方法获取对象值的数组，然后访问第一个元素的 name 属性在那个数组中

 const currency = Object.values(data.currencies)[0].name;

 <p class="country__row">${currency}</p>