0

Есть

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>

7
  • Пользователь выбирает из списка страну. Не все ведь люди знают кодировку своей страны. После выбора из списка страны, в запрос должен прописаться ключ. То есть "RU": "Russian Federation". Пользователь выбирает "Russian Federation", и в запрос прописывается ключ "RU", только в нижнем регистре
    – vvv7220
    10 мая 2020 в 13:04
  • хотя код работает. СПАСИБО! Но не понял как. Буду разбираться. Я думал что надо условия какие то прописывать
    – vvv7220
    10 мая 2020 в 13:08
  • Можешь объяснить как это работает? Я же выбираю из списка страну, каким образом в запрос вставляется тогда кодировка, да ещё я так понял запросу пофиг в каком регистре
    – vvv7220
    10 мая 2020 в 13:36
  • Потому что цикл for in выбирает ключи объекта, а не значения. По этому в option вставятся RU, SA и тд. Их то и возвращает document.querySelector('.cnt').value 10 мая 2020 в 13:44
  • То есть key это RU и тд. А zip[key] это Russian Federation 10 мая 2020 в 13:47

1 ответ 1

0

Получите страну 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.