Помогите разобраться с fetch запросом. Нужно вставить в него переменные

Question

Есть

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) + '&deg;';
        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>

Answer 1

Получите страну let country = document.querySelector('.cnt').value;и вставьте в url запроса.

Для тестирования:

id: 168192
zip: Russian Federation

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() {
  let city = document.querySelector('.city').value;
  let country = document.querySelector('.cnt').value;
  
  let url = `https://api.openweathermap.org/data/2.5/weather?zip=${city},${country}&appid=70e1ed322b02acbc57d443dd91065f3e`;
  
  fetch(url)
    .then(function(resp) {
      return resp.json()
    })
    .then(function(data) {
      document.querySelector('.package-name').textContent = data.name;
      document.querySelector('.price').innerHTML = Math.round(data.main.temp - 273) + '&deg;';
      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() {});

}

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>

БЛОГ НА HUSL

Помогите разобраться с fetch запросом. Нужно вставить в него переменные

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