I’m trying to list all ‘languages’ from a JSON file into a <li>
using the rest countries API (https://restcountries.com/v3.1/all) that looks like this (example country Malta)
languages: {
eng: "English",
mlt: "Maltese"
},
My code
filteredCountries.map(country =>
<div key={country.cca2}>
<h1>{country.name.common}</h1>
<>Capital: {country.capital}</><br/>
<>Population: {country.population.toLocaleString()}</>
<h3>Languages</h3>
<ul>
{Object.keys(country.languages).map(lang => {
<li key={lang.name}>{lang.name}</li>
}
)}
</ul>
<img src={country.flags.png} alt='Country Flag'/>
</div>
I am able to pull the country name, capital, population and flag but unable to list the languages in an efficient manner since every country has a varied number of languages. Using Object.keys
doesn’t provide errors but it doesn’t display what I want. I tried using country.languages.map
but I get the error of TypeError: country.languages.map is not a function
I was able to get the country name and capital using country.name.cca2
and country.capital
respectively