Как использовать коды стран, хранящиеся в переменной, при использовании Open Weather API?

Question

Я сохранил коды стран в переменной (т. Е. В ГБ, США, Новой Зеландии), которую я приобрел у https://restcountries.eu/

Я также использую бесплатный Weather API https://openweathermap.org/api дляполучать текущие данные о погоде для любого города, который пользователь вводит в мой поисковый запрос.

Все работает нормально, но проблема у меня заключается в интеграции кодов стран и их привязке к флажкам, чтобы пользователи могли щелкать и фильтровать результаты поиска.в конкретный город (например, есть Манчестер в Великобритании и США, и поиск по умолчанию покажет только один из Великобритании).Есть ли способ использовать сохраненные коды стран в переменной, чтобы представить их в виде флажков (или чего-то подобного) для выбора пользователя?Мне, вероятно, потребуется написать некоторый HTML-код для представления флажков и т. Д., Но я не понимаю, как эффективно использовать переменную с сохраненными кодами и что было бы разумно сделать в этом случае.

Я создал новую переменную с кодом ГБ в виде строки и заставил мой getJSON учитывать это в параметрах поиска так же, как при вводе данных для поиска в конкретном городе.Это сработало, но вместо того, чтобы вручную писать более 20 кодов стран, мне было интересно, есть ли элегантное решение моей проблемы.Я также поиграл с некоторыми утверждениями if (которые вы можете увидеть ниже), но я знаю, что это какой-то примитивный / некачественный код.

        var city = $("input[name=city-box]").val();
        var region = "";

        if (document.getElementById("GB").checked) {
            region = ",gb";
        }
        if (document.getElementById("USA").checked) {
            region = ",usa";
        }

        $.getJSON("https://api.openweathermap.org/data/2.5/weather?q=" + city + region + "&units=metric&APPID=apikey", function(data) {
            console.log(data);.....

Этот вид выполнения того, что я пытаюсь сделать (хотя и плохо), и он не использует те коды стран, которые хранятся для меня в другой переменной.Любой совет приветствуется!

Answer 1

Вот простой пример, показывающий один из способов сделать это, используя элементы <select> и событие change:

$(function() {
    var countryCodes = ["GB", "US", "NZ"];
    var cities = ["Manchester", "Birmingham"];

    var countrySelect = $("#country-box");
    var citySelect    = $("#city-box");

    // Add country codes/cities to the <select> elements
    populateSelectElement(countrySelect, countryCodes);
    populateSelectElement(citySelect, cities);

    // Listen for the "change" event on the .weather-select elements
    $(".weather-select").change(function() {
        var countryCode = countrySelect.val();
        var city = citySelect.val();

        // Ensure both a country and city have been selected before making a request
        if (countryCode && city) {
            var apiUrl = "https://api.openweathermap.org/data/2.5/weather?q=" + city + countryCode + "&units=metric&APPID=apikey";
            console.log("Loading URL: " + apiUrl);
        }
    })

    // Adds <option> elements to an element from an array
    function populateSelectElement(element, values) {
        for (var i = 0; i < values.length; i++) {
            element.append("<option value='" + values[i] + "'>" + values[i] + "</option>");
        }
    }
})

<select id="country-box" class="weather-select">
    <option value="">Select a country</option>
</select>

<select id="city-box" class="weather-select">
    <option value="">Select a city</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Очевидно, что это довольно просто, но должно быть достаточно, чтобы дать вам представление.

---

¹ https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event