Блог

Главная - Вопросы по программированию - Мой вызов API выдает ошибку, когда я использую переменную в качестве аргумента, но не когда я жестко кодирую местоположение в вызове API

Мой вызов API выдает ошибку, когда я использую переменную в качестве аргумента, но не когда я жестко кодирую местоположение в вызове API

#javascript #html #async-await #httprequest #weather-api

#javascript #HTML #async-await #httprequest #weather-api

Вопрос:

Я просто тренируюсь с вызовами и запросами API, создавая простое веб-приложение с использованием Openweatherapi из Openweather.org . Это просто позволяет вам ввести название города и использовать кнопку, чтобы отправить его. Данные извлекаются, и возвращается описание погоды в городе.

Вот HTML:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
    <input type="text" id="cityName">
    <br>
    <button id="citySubmit">Submit city to get weather</button>
   <div id="weatherResponse"></div>
<script src="js/main.js"></script>
</body>
</html>

Вот Javascript:

 const button = document.getElementById('citySubmit');
const citySearch = document.getElementById('cityName');



const getJSON = async (api) => {
    try {
      const response = await fetch(api);
      if(!response.ok) // check if response worked (no 404 errors etc...)
        throw new Error(response.statusText);
  
      const data = await response.json(); // get JSON from the response
      return data; // returns a promise, which resolves to this data value
    } catch(error) {
      return error;
    }
}

  /*
  //Call funciton and make http request:

  console.log("Fetching data...");
  getJSON(apiCall).then(data => {
    console.log(data);
  }).catch(error => {
    console.error(error);
  });*/

  
  console.log("Fetching data...");//Just to see if it's working.
  getJSON(apiCall).then(data => {
    console.log(data);
  }).catch(error => {
    console.error(error);
  });


  button.addEventListener("click", function(){
//As you can see, Tampa is hard-coded into the API call
    const apiSearch = 'http://api.openweathermap.org/data/2.5/weather?q=tampaamp;appid={API Key}';
    console.log("Fetching data...");
    getJSON(apiSearch).then(data => {
        
      const cityName = data.name;
      const country = data.sys.country;
      const description = data.weather[0].description;
      //Weather reponse div
       document.getElementById('weatherResponse').append(`The weather in ${cityName}, ${country} is ${description}.`);
    })/*.catch(error =s> {
      console.error(error);
    });*/
  })

Как вы можете видеть, Тампа жестко запрограммирована в вызове API (клавиша опущена), поэтому при нажатии кнопки она просто возвращает погоду Тампы. Если запрос выполняется таким образом, он работает.

Вот документация для примеров вызовов:

 api.openweathermap.org/data/2.5/weather?q={city name}amp;appid={API key}

Когда я пытаюсь сделать запрос, написав его так, используя переменную в качестве аргумента, который принимает город, представленный в поле ввода: http://api.openweathermap.org/data/2.5/weather?q=' citySearch 'amp;appid={API key} он выдает ошибку 404.

Вызов API определенно работает, пока город жестко запрограммирован в запросе. Я не уверен, что я делаю неправильно. Я также использовал скобки, приведенные в примере, но это, вероятно, неправильно. Я неправильно использую переменную в вызове API? Я в тупике.

Комментарии:

1. citySearch является элементом HTML

2. Может быть, вы имеете в виду citySearch.value ?

3. Я добавил это к переменной в запросе, и это работает!!!!! Спасибо! 🙂