Having trouble establishing a connection with the OpenWeather API in your Javascript code

Question

Having trouble establishing a connection with the OpenWeather API in your Javascript code

I'm trying to show the current weather conditions for the state I enter, but every time I do, it gives an error saying "wrong city name" and then shows as undefined.

const button = document.querySelector('.button');
const inputValue = document.querySelector('.inputValue');
const nam = document.querySelector('.nam');
const desc = document.querySelector('.desc');
const temp = document.querySelector('.temp');

button.addEventListener('click', function() {
    fetch('https://api.openweathermap.org/data/2.5/weather?q=' + inputValue.value + '&appid=0c712e338cabb3996a78ae788fa566a1')
    .then(response => response.json())
    .then(data => {
        const nameValue = data['nam'];
        const temperature = data['main']['temp'];
        const descValue = data['weather'][0]['description'];
        nam.innerHTML = nameValue;
        temp.innerHTML = temperature;
        desc.innerHTML = descValue;
    })
    .catch(err => alert("Oops! Wrong City name!"));
});

javascript json api rest openweathermap

Answer 1

Answer №1

If your API call returns an error response [1], make sure to handle exceptions in your code due to its nested structure.

// Since "main" does not exist in the error response, accessing a child of "main" will throw an error.
var temp = data['main']['temp'];

// Similarly, "weather" does not exist in the error response, resulting in an error when trying to access a child of "weather".
var descValue = data['weather'][0]['description'];

It's a good practice to check the response code before parsing the data, as shown below -

.then(response => {
  if (response.cod == 200) {
    // Your logic here
  } else {
    throw new Error(response.message)
  }
).catch(err => alert(err))

In addition, there are a couple of typos in your code -

// The key "nam" does not exist in the response, use "name" instead as shown in the success response [2].
var nameValue = data['nam'];

// You store the description as "descValue"
var descValue = data['weather'][0]['description'];
// However, you are using "description" here
desc.innerHTML = description;

[1] Error response -

{
  "cod": "404",
  "message": "city not found"
}

[2] Success response (if city exists) -

{
  "coord": {...},
  "weather": [...],
  "base": "stations",
  "main": {...},
  "visibility": 10000,
  "wind": {...},
  "clouds": {...},
  "dt": 1618812226,
  "sys": {...},
  "timezone": -14400,
  "id": 4350049,
  "name": "California",
  "cod": 200
}

Answer 2

If your API call returns an error response [1], make sure to handle exceptions in your code due to its nested structure.

// Since "main" does not exist in the error response, accessing a child of "main" will throw an error.
var temp = data['main']['temp'];

// Similarly, "weather" does not exist in the error response, resulting in an error when trying to access a child of "weather".
var descValue = data['weather'][0]['description'];

It's a good practice to check the response code before parsing the data, as shown below -

.then(response => {
  if (response.cod == 200) {
    // Your logic here
  } else {
    throw new Error(response.message)
  }
).catch(err => alert(err))

In addition, there are a couple of typos in your code -

// The key "nam" does not exist in the response, use "name" instead as shown in the success response [2].
var nameValue = data['nam'];

// You store the description as "descValue"
var descValue = data['weather'][0]['description'];
// However, you are using "description" here
desc.innerHTML = description;

[1] Error response -

{
  "cod": "404",
  "message": "city not found"
}

[2] Success response (if city exists) -

{
  "coord": {...},
  "weather": [...],
  "base": "stations",
  "main": {...},
  "visibility": 10000,
  "wind": {...},
  "clouds": {...},
  "dt": 1618812226,
  "sys": {...},
  "timezone": -14400,
  "id": 4350049,
  "name": "California",
  "cod": 200
}

Having trouble establishing a connection with the OpenWeather API in your Javascript code

Answer №1

Similar questions

Error encountered when entering a value in the Material UI keyboard date picker

Automatically sync textbox width with gridview dimensions

Unable to load a different webpage into a DIV using Javascript

Terminate the npm build script within a Node.js script

Can one validate a single route parameter on its own?

Obtaining the data from the React material-UI Autocomplete box

Button click causing TextField to print incorrectly

Double-checked in p:commandButton, encountering a race condition with oncomplete

Strange symbols were stored in the database after saving the textarea value

Struggling to retrieve accurate information from database (MSSQL) using PHP and JSON

Dealing with Unhandled Promise Rejections in Express.js

What is the best way to change a date-containing string into a Json object?

Attempting to connect JQuery to a different page through a data attribute connection

Comparing JS Async/Await, Promise, and Callbacks: Which is Best

Using JavaScript Imports and Exports in Node.JS

Customize the position values of the Ngx-bootstrap Tooltip manually

In mongoose, documents are able to update autonomously without any explicit request

The ToDate must always be greater than or equal to the FromDate

incorporating a qml conditional statement when assigning a class

How to iterate through a Vue data object using forEach loop