Pobieranie danych z API, jQuery

Odpowiedz Nowy wątek
2020-04-10 14:16

Rejestracja: 9 miesięcy temu

Ostatnio: 1 miesiąc temu

0

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ć.

Pozostało 580 znaków

2020-04-10 15:20

Rejestracja: 5 miesięcy temu

Ostatnio: 2 godziny temu

1
$('#search').click(function() {
    $.get('https://restcountries.eu/rest/v2/name/' + $('#country-name').val(), function(response) {
        countries = response

        $('#countries').empty()

        countries.forEach(function(item, index) {
            $('<li>').text(item.name).attr('key', index).appendTo($('#countries'))
        })
    })
});

$('#countries').on('click', 'li', function() {
    var clickedItem = $(this).attr('key')

    $('#c-flag').show();

    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(countries[clickedItem].name);

    capital.children().text(countries[clickedItem].capital);
    population.children().text(countries[clickedItem].population.toLocaleString("pl-PL"));
    area.children().first().text(countries[clickedItem].area.toLocaleString("pl-PL"));
    language.children().text(countries[clickedItem].languages.map(l => l.name));
    currency.children().text(countries[clickedItem].currencies.map(c => c.name + ' - ' + c.code));
    dialing.children().text('+' + countries[clickedItem].callingCodes);

    document.querySelector('img').src = countries[clickedItem].flag;
})

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0