January 4

Fetching API Data with the AerisWeather JavaScript SDK

You don’t need to be an API guru to interact with the AerisWeather API. In fact, we’ve recently launched a JavaScript SDK that simplifies building your API queries and handling the responses. By the end of this post you’ll see just how to easy it is to play with our API.

JavaScript vs. NodeJS

We’re all about choices with the latest JavaScript SDK. Did you want to access weather data via NodeJS or browser-based JavaScript? Either way, we will have you covered. Both options have their own benefits, but it will be up to you to determine which implementation method best suits your use case. For this exercise I’ll use the browser-based method.

Getting Started

Go ahead and sign up for the free developer trial. If you’ve already done this you are one step ahead — nicely done. You’ll need your Client ID and Client Secret to complete this tutorial. A couple of other topics you may need to brush up on before we dive any deeper:

  1. HTML / CSS
  2. Basic JavaScript Knowledge
  3. A bit of Bootstrap (for this tutorial)

I’m guessing the first 2 were known prerequisites when you read the title, but you’ll notice later on there are some Bootstrap references. Have no fear, you don’t need to know any Bootstrap to use the JavaScript SDK. I just decided to use it for the example that we’re about to step through below.

Setting Up Your Document

I’ve decided we need to have a page that displays a simple 5 day forecast for Minneapolis, MN. It should look something like this when we’re all done:

5 day forecast

Should be fairly simple, let’s start with the scripts and CSS that we will use and put them in our   tag.

As you can see we are only loading Bootstrap’s CSS file and, of course, the AerisWeather JavaScript SDK script. You’ll notice I included the attribute  in the script tag. We’re doing this because it allows us to load the script asynchronously so we can render HTML without waiting for the script to complete downloading and executing. This is simply to improve performance and load times for the user. Feel free to check out this detailed article for more information. Alternatively, you could load the script at the bottom of the page just above the closing tag to accomplish the same goal. Moving onto the  , let’s add our page title and a place to insert the forecast details once we get them.

Now, AerisWeather JavaScript SDK Forecast is our page title and we have a target element to put the location name and forecast details. Your page should look like this so far:

Page Title

Using the JavaScript SDK

First things first, we need to instantiate the library with our client credentials:

Now we can have some fun and start using the AerisWeather JavaScript SDK:

You’ll notice I initially declared the variable for Minneapolis which was passed to my and . Each request was built with the previously instantiated variable, which is an instance of AerisWeather, while chaining various methods starting with to create the full query. Let’s break down each request:

Forecast

Following , we used the method which takes a string argument that correlates with one of the supported Weather API endpoints. Now that we know we’re using the forecasts endpoint, we can use the endpoints parameters to further specify what we’re looking for. We know we want forecast data for Minneapolis and we know we only want 5 days worth. Therefore, we can then chain the method, which takes a string that represents your location (or in this case, the variable), and the method, which takes an integer to define the number of days we want. Finally, we can apply the method which will trigger the library to actually perform the HTTP request and save the results as a Promise in our variable.

Places

Very similar to the forecast setup, we need to define the endpoint (places) and tell our query where to search. That’s all we need for this request, so I’ll cap it off with the method as we did with the forecast.

Believe it or not, we’re done using the JavaScript SDK since we were able to get exactly what we wanted with the previous code snippets – weather data!

Putting It All Together

In the forecast request, I briefly mentioned the the results would be stored as a Promise. This is handy because it allows us to execute code after the completion of an asynchronous operation. Since we’re working with two promises, we can use the ever-so-handy Promise.all() method to take care of both requests and then start adding content to the page.

Once the results are defined you can see I’m calling two separate functions: and . I’d like to think both of these function names are self-describing, but just in case they’re not here’s what they’re doing:

formatPlaceName

This function will take the results from places query and use either the state name or country name to display the location. I wanted to make sure if I were to ever use this page again for a location that doesn’t support states / provinces, we wouldn’t have to add logic later on.

;
}

renderForecastDays

This function will take each period from the forecast request and inject the details into our page. Here you’ll see me doing a couple things:

  1. Define the day names
  2. Define variables for the weather data I want to use (icon, max temp, min temp, and short description)
  3. Build a template string with the weather details using Bootstrap classes
  4. Insert each period’s formatted template result into the HTML document

;
const maxTempF = period.maxTempF || ‘N/A’;
const minTempF = period.minTempF || ‘N/A’;
const weather = period.weatherPrimary || ‘N/A’;

const template = ( );

document.getElementById(‘forecast-items’).insertAdjacentHTML(‘afterbegin’, template);
});
}

The final product should look something like this:

;
}

function renderForecastDays(periods) {
periods.reverse();

const weekdayNames = [
‘Sunday’,
‘Monday’,
‘Tuesday’,
‘Wednesday’,
‘Thursday’,
‘Friday’,
‘Saturday’
];

periods.forEach(period => {
const dayName = weekdayNames[new Date(period.dateTimeISO).getDay()];
const iconSrc = ;
const maxTempF = period.maxTempF || ‘N/A’;
const minTempF = period.minTempF || ‘N/A’;
const weather = period.weatherPrimary || ‘N/A’;

const template = ( );

document.getElementById(‘forecast-items’).insertAdjacentHTML(‘afterbegin’, template);
});
}

}

</script>

</body>
</html>

I wrapped our entire code block around a function. This is required since we used the attribute to load our script as we did not the code on this page to start executing until the library script was fully loaded and executed.

Grand Finale

Now that we’ve put all the pieces together, you should have a working page that shows you the forecast for Minneapolis (or whatever city you chose). Here is the finished product:

JavaScript SDK Forecast

Hopefully this brief introduction was able to inspire you to make your own web application. We’d love to see what you can do with the new AerisWeather JavaScript SDK!

Share this post:

Post Details

Posted by Brandon Clark at 10:53 pm

2 comments

Categorised in: Developer, Tutorials

Tags: javascript sdk

2 Comments

  1. Using the JavaScript SDK to Display Static Weather Maps - AerisWeather
    March 6, 2019 at 2:34 pm

    […] recently published a blog detailing how users can fetch data from the API using the new JavaScript SDK. This time we’ll spend a few minutes diving into the SDK’s […]

    Reply
  2. Use the Aeris JavaScript SDK to Build an Interactive Map - AerisWeather
    May 7, 2019 at 9:46 pm

    […] like the fetching data and static maps posts related to our JavaScript SDK, we will need to get our feet set with a few […]

    Reply

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.