AJAX. Ошибка в консоле, итерация проходить не один раз. Помогите пожалуйста

Question

Мне нужно показать информацию по введенной стране в инпуте, при нажатии кнопки. Показывает верно, но не корректно работает проверка на ошибку, если пользователь введет неправильное название или пустую строку, должно выходить в консоле ошибка. Ошибка выходить не один раз и даже если ошибки нет, не могу понять почему. Спасибо за любую помощь.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/script.js"></script>    
</head>

<body>
    <p><b>Name: </b><span id="name"></span></p>
    <p><b>Region: </b><span id="region"></span></p>
    <p><b>Subregion: </b><span id="subregion"></span></p>
    <p><b>Capital: </b><span id="capital"></span></p>
    <p><b>Flag: </b><span id="flag"></span></p>

    <input id="country-name" type="text">
    <button id="show">Show information</button>

<script>
   $(() => {
$.ajax({
    method: 'GET',
    url: 'https://restcountries.eu/rest/v2/all',
    success: response => {
        $('#show').on('click', () => {
            for (let i in response) {
                if ($('#country-name').val() === response[i]['name']) {
                    $('#name').text(response[i]['name']);
                    $('#region').text(response[i]['region']);
                    $('#subregion').text(response[i]['subregion']);
                    $('#capital').text(response[i]['capital']);
                    $('<img>')
                        .attr('src', response[i]["flag"])
                        .css({ width: '70px', height: '50px', position: 'absolute', 'margin': '-15px 0 0 20px' })
                        .appendTo('#flag')
                } else {
                    console.log('ERROR')
                }
            }
        });
    },
    });
});
</script>

</body>

</html>

Answer 1

Вы выводите ошибку для всех стран, не совпадающих с инпутом.

        for (let i in response) {
            if ($('#country-name').val() === response[i]['name']) {
                $('#name').text(response[i]['name']);
                $('#region').text(response[i]['region']);
                $('#subregion').text(response[i]['subregion']);
                $('#capital').text(response[i]['capital']);
                $('<img>')
                    .attr('src', response[i]["flag"])
                    .css({ width: '70px', height: '50px', position: 'absolute', 'margin': '-15px 0 0 20px' })
                    .appendTo('#flag');

                return;
            }
        }
        console.log('ERROR')

БЛОГ НА HUSL

AJAX. Ошибка в консоле, итерация проходить не один раз. Помогите пожалуйста

Ответы (1 шт):