Hej,
Mam problem przy prostej stronce wyszukującej kraje, które pobiera dane z API https://restcountries.eu/.
Wyszukiwanie krajów działą, problem dotyczy pobrania danych dla danego klikniętego kraju i wyświetlenia ich poniżej. Generalnie dość przypadkowo udało mi się osiągniać zamierzony efekt dopisując do końca danej funckji $(this)(), ale nie tak to powinno wyglądać. Kombinowałem z użyciem tego thisa ale nie mogę uzyskać pożądanego rezultatu bez errorów.
Kod skrytu wygląda następująco:
// zmienne z adresem URL oraz listą krajów
var url = 'https://restcountries.eu/rest/v2/name/';
var countriesList = $('#countries');
// na kliknięcie szukaj uruchamiamy funkcję
$('#search').click(searchCountries);
// ukrycie div'a z flagą kraju
var cFlag = $('#c-flag');
cFlag.hide();
// Główna funkcja
function searchCountries() {
var countryName = $('#country-name').val();
if(!countryName.length) countryName = 'Poland';
$.ajax({
url: url + countryName,
method: 'GET',
success: showCountriesList
})
// Funkcja uzupełniająca kraje
function showCountriesList(resp){
countriesList.empty();
resp.forEach(function(item) {
$('<li>').text(item.name).appendTo(countriesList);
var countries = $('#countries li');
// Funkcja pobierająca dane kraju po kliknięciu
countries.click(function(){
cFlag.show();
console.log($(this).text());
var cname = $('#c-name');
var capital = $('#cap');
var population = $('#pop');
var area = $('#are');
var language = $('#lan');
var currency = $('#cur');
var dialing = $('#dia');
cname.empty();
cname.text(item.name);
capital.children().text(item.capital);
population.children().text(item.population.toLocaleString("pl-PL"));
area.children().first().text(item.area.toLocaleString("pl-PL"));
language.children().text(item.languages.map(l => l.name));
currency.children().text(item.currencies.map(c => c.name + ' - ' + c.code)) ;
dialing.children().text('+' + item.callingCodes);
// flag.src = item.flag;
document.querySelector('img').src = item.flag;
// this, który generuję błąd, ale pobieranie danych na klik działa
$(this)();
});
})
}
}
```
Cały kod jeszcze do podejrzenia tutaj: https://codepen.io/wk-90/pen/dyYPyrV
Będę wdzięczny za podpowiedzi jak to poprawnie zrobić.