I am trying to select currencies[0].name but since it's not an Array I can't do that. What's the best way to select it? Do I need to convert it into an array and store it into a variable? In that case, I would need to empty the array every time I render a new country via function.
Now I can only select it by data.currencies.EUR.name but when the currency changes from EUR it doesn't work anymore. What do you suggest to do?
const renderCountry = function (data) {
const html = ` <article class="country">
<img class="country__img" src="${data.flags.png}" />
<div class="country__data">
<h3 class="country__name">${data.altSpellings[2]}</h3>
<h4 class="country__region">${data.region}</h4>
<p class="country__row"><span>👫</span>${(
+data.population / 1000000
).toFixed(1)}</p>
<p class="country__row"><span>🗣️</span>${data.languages.lit}</p>
<p class="country__row"><span>💰</span>${data.currencies.EUR.name}</p>
</div>
</article>`;
countriesContainer.insertAdjacentHTML('beforeend', html);
countriesContainer.style.opacity = 1;
};
//AJAX CALL NR1
const getCountryAndNeighbour = function (country) {
const request = new XMLHttpRequest();
request.open('GET', `https://restcountries.com/v3.1/name/${country}`);
request.send();
request.addEventListener('load', function () {
const [data] = JSON.parse(this.responseText);
console.log(data);
//Render country 1
renderCountry(data);
//Get Neighbour Country
const [neighbour] = data.borders;
console.log(neighbour);
if (!neighbour) return;
// AJax call 2
const request2 = new XMLHttpRequest();
request2.open('GET', `https://restcountries.com/v3.1/alpha/${neighbour}`);
request2.send();
request2.addEventListener('load', function () {
const [data2] = JSON.parse(this.responseText);
console.log(data2);
renderCountry(data2);
});
});
};
getCountryAndNeighbour('Lithuania');
You could convert object by using JavaScript function Object.values({}), which will return object values in array.
const currencies = {
a: 'test1',
b: 'test2',
c: 'test3',
};
const values = Object.values(currencies);
console.log(values); // ['test1', 'test2', 'test3']
console.log(values[0]); // 'test1'If you only want the first value from the currency object you can do something like following in your code. It will get the first key from the object and will provide the value of the name field.
${data.currencies[Object.keys(data.currencies)[0]].name}
The above code will make your function independent of the currency name EUR.
This is the basic processing assuming the correct data will always be available. In case there are any special cases about the missing values from the field or undefined field, you can add checks about the same before using the value.