Sometimes we need to source multiple API’s to get the same type of information and display it with the same coded format. Unfortunately, all API’s aren’t born equal and when we try to fit them into a formatted output, it just won’t work. In this case, it’s because API’s are not always structured the same.

We are going to look at two different weather API sources: the Weather Channel and AccuWeather. Here, we will study the difference in JSON output and the thoughts behind their structured design.

AccuWeather

First we need to go to the developers section at the AccuWeather website located here –> https://developer.accuweather.com/

You’ll need to set up an account to receive your API Key. I will review this process in a future blog, but at the end of the process you can receive different APIs for different information.

First, we obtain an API for conditions depending on our location. We get the link as…

// raw api
http://dataservice.accuweather.com/locations/v1/cities/autocomplete?apikey=BL84oxFsikLXeqZkAcPefEG8okzzcGzu&q=INSERTCITY&language=en-us

// api with city input
http://dataservice.accuweather.com/locations/v1/cities/autocomplete?apikey=BL84oxFsikLXeqZkAcPefEG8okzzcGzu&q=Chicago&language=en-us

The API asks us to search for our location, so I input Chicago. If we fetch the JSON info, we receive this…

fetchCities = () => {
        fetch(`http://dataservice.accuweather.com/locations/v1/cities/autocomplete?apikey=BL84oxFsikLXeqZkAcPefEG8okzzcGzu&q=Chicago&language=en-us`)
        .then(r => r.json())
        .then(cities => {
            console.log('Accu', cities)
           
        })
    }

This returns

Well, we see our desired result in the first item of the list, so let’s refine our fetch to this…

fetchCities = () => {
        fetch(`http://dataservice.accuweather.com/locations/v1/cities/autocomplete?apikey=BL84oxFsikLXeqZkAcPefEG8okzzcGzu&q=Chicago&language=en-us`)
        .then(r => r.json())
        .then(cities => {
            console.log('Accu', cities[0]['Key'])
  
        })
    }

// returns in console window '348308'

Our second API calls for a key to access weather information, so here we need to return the key. Our second API looks like this…

// Raw API
http://dataservice.accuweather.com/currentconditions/v1/CITYKEY?apikey=BL84oxFsikLXeqZkAcPefEG8okzzcGzu&language=en-us

// API with location key
http://dataservice.accuweather.com/currentconditions/v1/348308?apikey=BL84oxFsikLXeqZkAcPefEG8okzzcGzu&language=en-us

Using a similar fetch function we now receive our current conditions…

// cityKey is '348308'

fetchConditions = cityKey => {
        fetch(`http://dataservice.accuweather.com/currentconditions/v1/348308?apikey=BL84oxFsikLXeqZkAcPefEG8okzzcGzu&language=en-us`)
        .then(r => r.json())
        .then(conditions => {
            console.log('Accu', conditions)
        })
    }

Which returns in the console window…

And we receive our data in a neat two step process where any relevant information to a topic is always within its own folder.

the Weather Channel

Similarly to AccuWeather, you also need to set up a developer account for the Weather Channel to receive an API key –> https://callforcode.weather.com/

Here, we go through a similar process as we did for AccuWeather, but this time notice the difference in output of information.

Our location API…

// raw API
https://api.weather.com/v3/location/search?query=CITYLOCATION&locationType=city&language=en-US&format=json&apiKey=320c9252a6e642f38c9252a6e682f3c6

// With Location
https://api.weather.com/v3/location/search?query=Chicago&locationType=city&language=en-US&format=json&apiKey=320c9252a6e642f38c9252a6e682f3c6

And now we fetch…

fetchWeatherChannelCities = () => {
        fetch(`https://api.weather.com/v3/location/search?query=Chicago&locationType=city&language=en-US&format=json&apiKey=320c9252a6e642f38c9252a6e682f3c6`)
        .then(r => r.json())
        .then(cities => {
            console.log('Weather Channel', cities)
        })
}

And we receive…

Already we see a huge difference in information. Each item holds information related to a topic but is it really the best way to order this information? The first item holds all the addresses, the next holds all the states, another holds all the possible cities, and another holds all the possible placeId’s (similar to the city key in the AccuWeather API). Personally, I preferred the AccuWeather way of having all relevant information to a single location within a single list item. Here, we need to look at the index position of the desired location and then go down the object keys to find the second list we want for the next API location key, and then use that first index we found to match the location key we need. Such a long series of confusing steps.

Now, look at this next API we need to fetch for conditions…

// raw API
https://api.weather.com/v3/wx/observations/current?geocode=LATITUDE%2CLONGITUDE&units=e&language=en-US&format=json&apiKey=320c9252a6e642f38c9252a6e682f3c6

// filled API
https://api.weather.com/v3/wx/observations/current?geocode=41.876%2C-87.624&units=e&language=en-US&format=json&apiKey=320c9252a6e642f38c9252a6e682f3c6

Notice how we need a longitude and latitude here instead? Perhaps it’s a much more objective approach to finding a location than simply using a location key as it was in the AccuWeather API, but it can be up to preference.

Now we fetch this API to receive the next set of conditions…

// latitude and longitude are (41.876, -87.624)
fetchWeatherChannelCurrentConditions = (latitude, longitude) => {
        fetch(`https://api.weather.com/v3/wx/observations/current?geocode=${latitude}%2C${longitude}&units=e&language=en-US&format=json&apiKey=320c9252a6e642f38c9252a6e682f3c6
        `)
        .then(r => r.json())
        .then(conditions => {
            console.log('WC', conditions)
        })
}

And this returns…

It makes much more sense than the Weather Channel’s output for location information. However, we have another problem here. There’s such more information and much of it seems redundant or nit picky. It might have been better to contain all Precipitation information within a list, all temperature in a list, all pressure in a list, and so on. The AccuWeather conditions output in contrast was much neater by this standard.

Conclusion

All in all, I preferred AccuWeather’s style in structure, where all relevant information for a location is stored within its own object rather than divided by its topics and locations in various lists. I’m sure there are their own benefits and cons for each structure, but AccuWeather provides a much neater thought process to work with.

In future blogs, I will dive into the process of creating developer accounts for API’s and API Keys. I will also explore the process of organizing different API JSON outputs into more consistent structures for easier code workflow.