Есть
fetch("http://api.openweathermap.org/data/2.5/weather?zip=4000,au&appid=70e1ed322b02acbc57d443dd91065f3e")
Нужно вместо zip = 4000
вставить переменную, тот что я ввожу в инпут. Но так запрос тоже не сработает, потому что надо выбрать страну. После выбора страны из списка в запросе вместо au
должно появится кодировка выбранной из списка страны.
let zip = {
"RU": "Russian Federation",
"SA": "Saudi Arabia",
"SG": "Singapore",
"SK": "Slovakia",
"SI": "Slovenia",
"ES": "Spain",
"LK": "Sri Lanka",
"SE": "Sweden",
"CH": "Switzerland",
"TJ": "Tajikistan",
"TH": "Thailand",
"TR": "Turkey",
"TM": "Turkmenistan",
"UA": "Ukraine",
"AE": "United Arab Emirates",
"GB": "United Kingdom",
"US": "United States",
"UZ": "Uzbekistan"
}
const addListCnt = function() {
let bank = '';
for (let key in zip) {
bank += `<option value="${key}">${zip[key]}</option>`;
};
return bank;
};
(function() {
document.querySelector(`.cnt`).innerHTML = addListCnt();
}());
//
//
document.querySelector('.getWeather').onclick = function() {
for (key in zip) {
let city = document.querySelector('.city').value;
fetch(`http://api.openweathermap.org/data/2.5/weather?zip=${city},${key.toLowerCase()}&appid=70e1ed322b02acbc57d443dd91065f3e`)
.then(function(resp) {
return resp.json()
})
.then(function(data) {
console.log(data);
document.querySelector('.package-name').textContent = data.name;
document.querySelector('.price').innerHTML = Math.round(data.main.temp - 273) + '°';
document.querySelector('.disclaimer').textContent = data.weather[0]['description'];
document.querySelector('.features li').innerHTML = `<img src="https://openweathermap.org/img/wn/${data.weather[0]['icon']}@2x.png">`;
})
.catch(function() {
// catch any errors
});
}
}
li {
list-style: none;
}
<div class="wrapper">
<span>Выбрать страну</span>
<select class="cnt">
<!-- <option value="default"></option>-->
</select>
<br><br>
<input type="text" class="city" placeholder="Введите индекс своего города"> <button class="getWeather">Запросить</button><br>
<div class="weather">
<div class="package-name"></div>
<div class="price"></div>
<div class="disclaimer"></div>
<div class="main"></div>
<div class="description"></div>
<ul class="features">
<li></li>
</ul>
</div>
</div>
for in
выбирает ключи объекта, а не значения. По этому вoption
вставятсяRU
,SA
и тд. Их то и возвращаетdocument.querySelector('.cnt').value
key
этоRU
и тд. Аzip[key]
этоRussian Federation