44 lines
1.5 KiB
JavaScript
44 lines
1.5 KiB
JavaScript
const countryContainer = document.querySelector(".countries");
|
|
const request = fetch("https://restcountries.com/v3.1/name/slovenia");
|
|
console.log(request);
|
|
|
|
function renderCountry(data) {
|
|
const html = `
|
|
<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)} Mil</p>
|
|
|
|
</div>
|
|
</article>
|
|
`;
|
|
countryContainer.innerHTML += html;
|
|
}
|
|
// man kann einen ajax Aufruf Mithilfe Promise Datastruktur ausgeführt werden
|
|
const countryData = function (country) {
|
|
fetch(`https://restcountries.com/v3.1/name/${country}`) // die Metzhode fetch gibt Promise DS zurück
|
|
.then(response => {
|
|
console.log(response);
|
|
return response.json(); // die Methode gibt pending Promise zurück, und wenn die Daten erfolreich erhaltet werden,
|
|
// wird ein Promise mit json Daten zurück gegeben
|
|
})
|
|
.then(data => {
|
|
// die zweite Methode then() behandelt dann ein JSON, in unserem Fall bekommt man schon geparsed JSON Data
|
|
console.log(data[0]);
|
|
renderCountry(data[0]);
|
|
const neighbour = data[0].borders[0];
|
|
if (!neighbour) return;
|
|
return fetch(`https://restcountries.com/v3.1/alpha/${neighbour}`);
|
|
})
|
|
.then(response => {
|
|
response.json();
|
|
})
|
|
.then(data => renderCountry(data, "neighbour"));
|
|
};
|
|
|
|
countryData("germany");
|