Country API Issues while rendering (Complete Solution) #436
Description
////// Instead of writing this code
<article class="country">
<img class="country__img" src="${data.flags.png}" />
<div class="country__data">
<h3 class="country__name">${data.name.common}</h3>
<h4 class="country__region">${data.region}</h4>
<p class="country__row"><span>👫</span>${(
+data.population / 1000000
).toFixed(1)} people</p>
<p class="country__row"><span>🗣️</span>${data.languages.urd}</p>
<p class="country__row"><span>💰</span>${data.currencies.name}</p>
</div>
</article>
///// Write this code
<article class="country ${className}">
<img class="country__img" src="${data.flags.png}" />
<div class="country__data">
<h3 class="country__name">${data.name.common}</h3>
<h4 class="country__region">${data.region}</h4>
<p class="country__row"><span>👫</span>${(
+data.population / 1000_000
).toFixed(1)}</p>
<p class="country__row"><span>🗣️</span>${Object.values(
data.languages
).join()}</p>
<p class="country__row"><span>💰</span>${Object.keys(
data.currencies
).join()}</p>
</div>
</article>
//////////// Also destructure data2 in request2 event handler
const [data2] = JSON.parse(this.responseText);