restnations 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。我想用这个国家主要货币的名字来代替。不幸的是，数据的结构是这样的，为了显示货币的名称，我首先必须调用它的短名称，如下所示:

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

如果我调用{data。我就会得到一个空对象。如果我调用它为{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。货币是一个对象。在本例中，要访问货币的名称，可以使用object .values()方法获取对象值的数组，然后访问该数组

中第一个元素的name属性

const currency = Object.values(data.currencies)[0].name;
<p class="country__row">${currency}</p>