Use Weather Data

Let’s use the data prop from the last lesson to display the city’s weather information. The data received from the API is in the form of objects, as we saw in the console in the Use InputCity Component lesson. As a result, each piece of information used in this component is a property of the data object. The following snippets show how we extract and use the different properties from the data object. Let’s destruct the data object in the parameter itself.

const ShowWeather= ({ data }) =>{
   ...
}

Optional chaining

We’ll employ the ternary operator here, though we don’t use it to get the value of the properties from our project’s data. We should be aware of this because it’s a different approach to extracting value from data than the normal object.propertyName = property value method. We don’t always get all properties for each input when we extract data from the API, which leads to code issues. JavaScript includes the concept of optional chaining (?.) to solve this problem. This optional chaining’s syntax is given below:

object.someNonExistingProperty?.

Example of optional chaining

Here, we try to use the info property in the cat, which is the nonexistent property. We therefore get an error, and our code stops working.

const animal = {
dog:{
    info:{
      name: 'Tommy',
      age: 2,
    },
  },
cat: {
    age: 2,
  },
};

console.log(animal.dog.info.name); // Tommy
console.log(animal.cat.info.name); // Error
console.log(animal.dog.info.name); // No output

Let’s now use optional chaining (?.).

const animal = {
  dog: {
    info: {
      name: 'Tommy',
      age: 2,
    },
  },
  cat: {
    age: 2,
  },
};

console.log(animal.dog.info?.name); // Tommy
console.log(animal.cat.info?.name); // undefined
console.log(animal.dog.info?.name); // Tommy

Notice that we get the output when the info property is present and undefined, where the info property isn’t current by using optional chaining in front of the non-existing property. This helps avoid code termination.

Note: Read more about Optional Chaining from the Educative Answer post on optional chaining.

Extract properties from the data

We’ll now use various properties from data to display weather data on the screen. We can use as many values as we want, but we’ll only use a few of them here, including name, country, temp, pressure, visibility, humidity, and clouds. The following code snippet shows how to extract the properties from data:

const city = data.name;
const country = data.sys ? data.sys.country : null;
const temperature = data.main ? data.main.temp : null;
const pressure = data.main ? data.main.pressure : null;
const visibility =  data ? data.visibility : null;
const humidity = data.main ? data.main.humidity : null;
const clouds =  data.clouds ? data.clouds.all : null;

Some values above aren’t in the standard units, so we need to convert them. We need pressure in atmospheric pressure (atm), temperature in celsius, and visibility in kilometers.

const pressureInAtm = (pressure / 1000).toFixed(2);
const tempInCelsius = (temperature / 10).toFixed(2);
const visibilityInKM = (visibility / 1000).toFixed(2);

All we have to do is pass these values in our ShowWeather component.

Combining the code snippets above produces the following code widget: