提问者:小点点

API-通过JavaScript将货币名称动态转换为超文本标记语言


我是Javascript新手,我一直在学习如何将一个国家的属性导入超文本标记语言元素。你们中的一些人可能认识这段代码,它来自教程,现在已经过时了。我一直在寻找更新的解决方案,但没有找到任何解决方案。

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

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;
}

这可以正常工作,但问题是在超文本标记语言的末尾,我输入{data. FIFA}时,我想使用该国主要货币的名称。不幸的是,数据的结构是这样的,为了显示货币的名称,我首先必须调用它的短名称,如下所示:

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

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

感谢任何帮助。


共2个答案

匿名用户

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

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

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

匿名用户

数据.货币是一个object.To访问货币的名称在这种情况下,您可以使用Object. value()方法获取对象值的数组,然后访问该数组中第一个元素的name属性

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

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