Soy nuevo en Javascript y he estado aprendiendo cómo importar los atributos de un país en un elemento HTML. Algunos de ustedes pueden reconocer este código, es de un tutorial, que ahora está desactualizado. He estado buscando una solución actualizada, pero no pude encontrar ninguna.

Primero tengo la función para obtener los datos:

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

Luego llamo a esa función, proporcionando un país getCountryData('czechia') para infundirlo en un elemento como este:

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

Esto funciona bien, pero el problema es que al final del HTML, donde ingreso {data.fifa}, quiero tener el nombre de la moneda principal del país. Desafortunadamente, los datos están estructurados de tal manera que para que se muestre el nombre de la moneda, primero tengo que llamarlo por su nombre corto, como se muestra a continuación:

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

Si invoco {data.currencies} en la cadena, solo obtendré un objeto vacío. Si lo llamo {currencies.CZK.name}, funciona, pero el problema es que si llamo a Suecia, por ejemplo, no mostrará nada, porque entonces tendría que ser {currencies.SEK.name }. ¿Cómo soluciono esto? ¿Cómo puedo llamar el nombre de una moneda sin tener que incorporar CZK, SEK, USD, EUR, etc. en la variable?

Cualquier ayuda es apreciada.