How to use try and catch if the user enters wrong city name with an Weather Api search?

Question

I want an alert to pop-up when the user enters an invalid city name.

Tried using if-else and try-catch method, but not working. I am using the Weather API to get the weather and temperature.

const getWeather = () => {
  let cityName = $("#cityName").val();
  let apiCall = `http://api.openweathermap.org/data/2.5/weather?q=${cityName}&mode=json&units=metric&appid=${
    CONSTANTS.appId
  }`;
  $.getJSON(apiCall, weatherData => {
    let cityName = weatherData.name;
    let countryName = weatherData.sys.country;
    let description = weatherData.weather[0].description;
    let tempMin = weatherData.main.temp_min;
    let tempMax = weatherData.main.temp_max;
    $("#city").text(cityName);
    $("#detail").text(description);
    $("#country").text(countryName);
    $("#mintemp").html(`Minimum: ${tempMin}<span>&#8451;</span>`);
    $("#maxtemp").html(`Maximum: ${tempMax}<span>&#8451;</span>`);
  });
};

Whenever an invalid input is entered I get this message in the console.

GET http://api.openweathermap.org/data/2.5/weather?q=sdx&mode=json&units=metric&appid=d568dc579415266146ede4b4f9de029b 404 (Not Found)    
jquery-3.4.1.js:9837

I don't want the error to appear, but instead use the error to display a message stating invalid user input.

the entire code link is https://github.com/Shefali-Upadhyay/weather-app

have tried the try and catch but it is not working. Please open the link and check it on the inspect console section where it gives the 404 error. I don't want that error to appear when the user enters the wrong input, instead I want an alert to pop-up. Unable to execute it. — , May 24 '19 at 08:17
[How do I catch jQuery $.getJSON?](https://stackoverflow.com/a/5553540/3082296) — adiga, May 24 '19 at 08:27
@ShefaliUpadhyay This is definitely not a `try...catch` scenario. You just have to handle the error in the right way. Check out my answer. — Praveen Kumar Purushothaman, May 24 '19 at 08:30

Praveen Kumar Purushothaman · Accepted Answer · 2019-05-27T12:23:03.740

In this case, you don't need a try...catch block as jQuery handles everything for you but you need to sniff onto the HTTP Status Code. Don't use $.getJSON(), instead use $.ajax().

If you still want to use $.getJSON(), you can use the .fail() chained method this way:

let cityName = $("#cityName").val();
let apiCall = `http://api.openweathermap.org/data/2.5/weather?q=${cityName}&mode=json&units=metric&appid=${CONSTANTS.appId}`;

$.getJSON(apiCall, weatherData => {
  let cityName = weatherData.name;
  let countryName = weatherData.sys.country;
  let description = weatherData.weather[0].description;
  let tempMin = weatherData.main.temp_min;
  let tempMax = weatherData.main.temp_max;
  $("#city").text(cityName);
  $("#detail").text(description);
  $("#country").text(countryName);
  $("#mintemp").html(`Minimum: ${tempMin}<span>&#8451;</span>`);
  $("#maxtemp").html(`Maximum: ${tempMax}<span>&#8451;</span>`);
}).fail(() => {
  alert("City doesn't Exist!!");
  $("#cityName").val("");
  $("#city").text("");
  $("#detail").text("");
  $("#country").text("");
  $("#mintemp").html("");
  $("#maxtemp").html("");
});

@ShefaliUpadhyay Can you share the updated code please? – Praveen Kumar Purushothaman May 26 '19 at 15:53 — Praveen Kumar Purushothaman, May 26 '19 at 15:53
@ShefaliUpadhyay Great! – Praveen Kumar Purushothaman May 27 '19 at 12:21 — Praveen Kumar Purushothaman, May 27 '19 at 12:21

How to use try and catch if the user enters wrong city name with an Weather Api search?

1 Answers1

Linked