Working with JSON data

Build web apps with NodeJS & Express

🕑 This lesson will take about 20 minutes

In the previous lesson, we looked at how to make requests to an API and receive data in JSON format. However, we haven't really looked at how to access different types of data in JSON format yet. In this lesson, we will experiment with getting different pieces of data from JSON. Make sure you have the app you made in the previous lesson as we are going to add some more code to that.

To get started, copy and paste your API request URL in another browser tab. Make sure that it is formatted correctly (as shown below) and that you have your own OpenWeatherMap API key at the end of the URL. If you open the link (with a valid city/suburb name as the location and use a valid API key) in another browser tab, then you can view all the data that is retrieved, as shown below.

For example: https://api.openweathermap.org/data/2.5/weather?q=Sydney&units=metric&appid=your_API_key_goes_here

When you visit the URL in your browser, you will retrieve a block of text containing the response data in JSON format.

JSON response data shown in the browser

Let's copy and paste the block of JSON data and use a JSON viewer to more easily view the different pieces of data. There are a few different JSON viewers around, but the one that will be used in this example is Online JSON Viewer . Go to http://jsonviewer.stack.hu and then copy and paste your JSON data into the text box in the 'Text' tab as shown below. Click on the ‘Viewer’ tab to view a “tree” of data. You can then click and expand the different “branches” showing the different pieces of data.

JSON data shown in a JSON viewer

Now, in our code, we are storing all of this JSON data in a variable called weather. Let's look at some examples of how to access different pieces of information:

  • To access the current humidity value, we would specify weather.main.humidity as the "humidity" value is inside an object called "main" inside our JSON data object called "weather".

  • To access the wind speed value, we should specify weather.wind.speed .

  • To access the current description of weather conditions, we should specify weather.weather[0].description as the "description" value is inside the first element (0) of an array within an object called "weather" which is inside our JSON data object also called "weather" in our code.

  • To access the sunrise time for the location, we should specify weather.sys.sunrise . Let's take a look at some of these examples being used in the code.

  • You can also access icon codes to display different icon images for different conditions eg. sunny, cloudy, rainy, etc.

Let's take a look at some of these examples being used in the code (don’t forget to start the server again and navigate to http://localhost:3000 in your browser again after changing the code).

Screenshot of code showing variables containing temperature, humidity, weather conditions description, and wind speed.

Here is the full code for the index.js file so far:

In the next lesson, we will now turn our API requests and responses into a working weather app.


Next lesson: Make a weather app using an API