Fetch API and OpenWeatherMaps API

hey thanks for joining me um i'm going to be taking a look at the open weather api today this video is intended for somebody who's kind of new to working with um front-end javascript and the fetch api and so i thought i'd use the open weather map api it does have a free tier and it's a great example that we can use to kind of work through the documentation to figure out how to get some data so i'm just going to be kind of doing this live basically this isn't you know scripted or pre-planned or anything i have worked with this api before but it's been a while so i thought i'd just make this little video to show you how you could kind of explore an api and then set up an ajax request to get some data from that and add some content to the page i'm not going to be really delving into styling the content or making it look really nice um that's not the goal here in this video i do want to try and keep the video on the shorter side of things so i'm at the website for openweathermap.org and this is their api they have a number of different endpoints which provide you with different types of data we can get current weather data hourly forecast which is not available for the free account you have to have a paid subscription account we have the one call api daily forecast there's a bunch of different things you can do with this api there's a lot of a lot of nice services here there's even a geocoding api so and that's available for both free and paid subscriptions so um i think for this video i'm going to keep it limited to current weather data what we're going to do is just have a little form and be able to search for the weather the current weather in a specific city and then we'll show some information about the weather in that city so let's go and take a look at the api documentation before we decide how we're going to put our little program together so looking at current weather data and by the way if you want to follow along with this you're going to need to create an account first and request your api key and they have a nice guide on that if you go to the guide section for the open weather api where you can figure out how to get started so anyway back to the api documentation for current weather data and it allows you to get the the weather data for one location either by the name of the city the city id which comes from the open weather map api so you have to know that in advance you can use latitude and longitude for geographic coordinates or by a zip code so we're going to take a look at searching for a city by the name so let's go ahead and take a look at some example api calls so normally what i like to do right away is just get an api call working i like to see if there's an example somewhere so we can find an example call right here that's exactly what i would like to be able to do so they have one here for london and then you can see that i'm supposed to put in my app id so let me go ahead and grab that in just a second so what i like to do is just copy this and i'll normally just open up some kind of text editor really quick and paste that in then i'm going to go open up my api key i'm going to do that in another tab because i don't want to show i only want to show the temporary ik i made for this video so i'm logging in right now off camera to grab my api key that i'm going to use for this video um after i make this video and publish it i'll be removing this api key so it won't should not work for you so don't try to copy it you'll have to get your own account your own api key so now i've plugged in my api key and i have their demo url here which has a parameter of q equals london and then another parameter for your api key which is app id equals and then you plug in your api key and then i need to include a protocol here so since this is going to be a front end application and if i deploy to something like github pages it's going to be over https i'm going to go ahead and use that protocol and now i'm going to copy all of that and open up another tab in my browser and i can just paste that url in and that will send a get request over to the open weather map api and now i can see what i get back so we get some basic data it looks like we're getting temperature judging by the numbers i would guess that's probably kelvin but we can go investigate in the documentation looks like we're getting some kind of visibility number here wind speed not sure what that speed what kind of units are being used they're supposed to figure all that out in the api documentation so i'd like to be able to display the units in kind of a localized format for the united states so i'm going to be looking for displaying temperatures in fahrenheit wind speeds in miles per hour so let's see if i can there we go so looking through the parameters there's a couple we can use we can use mode which looks like it can give you xml 8 or html or by default we're getting json formatted data and then units aha so here we can see we can add a units parameter and it looks like we can provide standard metric and imperial standard units are looks like what we've been getting so if i go grab imperial units here and add that parameter so i just go back to my notepad and add another parameter i like to keep the api key at the end you don't have to do that but i like to so we're going to say units equal imperial like so now i'm going to go ahead and copy that whole string and try it again and just see what our response looks like now okay so we can see now the temperature is being reported as 47.55 and it looks like our wind speed is 11.5 miles per hour and lang let's see what lang does ah so it's a translation for city name and description so we can offer a language code let's see what language codes we have here just taking a look in case they have different variants of english i can't imagine they would for a weather api nope they don't okay i'm pretty sure the default is english so i'm not going to investigate that any further so i think at this point what i'd like to do is just i think start talking about how we're going to make this app so again it's going to be very bare bones so i'm just going to go ahead and make a new folder on my desktop and i'm going to call this weather api demo and now i'm going to use vs code as my editor here i'm going to go ahead and make an index.html page and i'll go ahead and make javascript i will call it index.js because why not let's get some basic um html going [Music] give our page a title an h1 and then we want to connect javascript i'm actually going to move this to the other half of my monitor and now we'll go ahead and connect our index.js file perfect okay quick format got our basic html and now i'm going to go ahead and open this up using vs code live server which is a great extension i highly recommend and then i'm going to open up the console because that's what we're going to start off with all right so i think the a common pattern for simple web apps that use api calls it's really nice to divide your code into two separate functions code for doing the request versus code for displaying content on the page from those results so i'm just going to make two functions function one will be we'll just name it render render weather and then the other function will be fetch weather and so i'm going to start off with just fetch weather and we already know we're going to want to search by city or use a query at the very least so i'm going to just call it query as the parameter and to get started we're just going to hard code in the url i know works so i'm just going to copy that to get started so i'm just going to save our url equals this string right here and then we're going to be using the fetch api to send our requests so if you go to um mozilla web docs search for the fetch api you can learn all about it there i'm just going to go there to get a handy snippet of code to get started with so if i scroll down um find an example in here somewhere let's see request response differences a boarding fetch hmm that wasn't the page i wanted using fetch that's that's the page yeah right here nice little example of getting a json response so i'm going to grab that snip it to get started and then instead of the url for the example i'm going to use my open weather map url that we know works and now i'm just going to make sure that i'm fetching some data so going back to live server here um let's see we need to call our function so we'll call fetch weather and there we go we can see that it works and i have data for london so now um i can either work on connecting it with my query or i could just go straight to displaying the results on the page i think it would probably be easier right now just to when i work on the function using the query later on it might be easier if i can already display data so that's actually what i'm going to do so i'm going to go over to my html i'm going to create just an empty div with an id of weather results and that can be used as a container to display the results of my ajax call so now i can get a reference to that container save our results container equals document.queryselector and that was weather results so i'm going to write this function just to take our weather and we want to just add it to the page in a few elements we're not going to try and make it look particularly fancy maybe just use some p tags or something let's see what we want to show we're going to show the temperature the name of the city see if we can get the name of the city so i guess that would be name yep so we'll display create h2 for name we want to create maybe just a p tag or let's see what else do we want to show we'll show the the city and then we'll show humidity when description community wind description and of course temperature do we want to show the time i don't think we want to show the time and do we want to show clouds i don't think so i think we're going to keep it simple so we'll show um overcast clouds main clouds we'll see what we want to do with description i may decide to take it off we'll see i think that's a good start though um and that's all we're going to show so we're going to create our h2 var city equals and then we'll just say it looks like it's weather dot name so we're going to create an element and then we're going to set its text content equal to city or weather dot name and then append that now i'm going to handle the additional items here so we're going to go ahead and create a bar um what's called info or details and that'll be a p tag and then we're going to go ahead and set it's hmm we'll create a string for details maybe actually we'll just use a pen so we'll say details dot append and let's go ahead and add weather so we'll say let's see temp colon space plus weather dot main dot temp and then we probably want it uh indicator of what the unit we're using for temperature is and then we'll go ahead and add details dot append and we'll actually add let's see you know what an easier way to make this might just be details dot inner html equals and that way we can just do something like this no actually that's yeah that's what we're gonna do we're just gonna keep it really simple here we'll just do one p tag each how about that that's what we'll do um we'll just do uh let's see temp temp dot text content equals and then we'll go ahead and append that to results container we'll do it again we'll make another p tag so this one will be humidity so that'll be weather. main.humidity and then we'll put a percent sign afterwards and then a results container open humidity what else did i say description and wind so far when basically start copying these and each time to find these different properties what i'm doing is looking over in my console over here just looking at this this entire object which is the weather object and just kind of figuring out where each thing is so i was getting main here and then looking in and seeing humidity and temp now i'm looking for wind which i think is i was on a separate there it is so it looks like dot wind so it'll be weather dot wind um dot speed plus miles per hour and then we'll show the degrees degrees and the symbol for degrees think nope doesn't come up there [Music] just google it degree symbol copy that to the clipboard thank you and there we go and now we can append when um we might as well instead of console logging data just call our render weather function um i still want to see data because i think we have a few more to add so console log weather up here save it so we can see we're starting to get some of our details here so we got wind temp humidity wind and description where's description at weather bracket zero so i probably want to do a check just in case it's not there so if weather dot weather notice how this key is weather weather but i named my parameter weather so that's why i need weather.weather and then bracket zero so we'll just check and make sure we have that and then probably check and make sure let's make a little temp variable um var um well i'll call this uh weather details we weather.weather bracket zero that'll just make it easier to do this we'll say weather details and we want to make sure that we have um a description it may be that that can all will always be there but i'm just kind of being a little defensive here so i don't have to go dig through their docks and they may or may not indicate in the docs anyway and then we'll check for a description like so so if both of those things are truthy um then we'll go ahead and add a description so one more time just copy how we did it for wind and then change that to uh let's see this should be i'll just zero it out there we go change this to description okay and then we need to set the text content to be um i'm just gonna i'm just gonna say weather details dot description like that and there we go overcast cloud so we'll just leave it at that i'll clean up my comments um this code's a bit repetitive i might consider just writing a little helper function that sets the text for a p tag or just sets the text for any element but i can do that another time i don't need this last append here anymore i think we're all set all right so now we have a little function that can render our weather let's go back and make it this dynamic because right now fetch weather is only ever going to get london and that's not that helpful for our goals so what we need to do is take query we're going to concatenate it in so for our little test function i'm going to go ahead and pass in london and then i'm going to go up here and i'm going to delete london and instead we're going to concatenate in query right here just like that format my code and now we have our url and we're going to concatenate in our query first so we can see that it's still working let's go ahead and change the city now look for sunny san diego and there we go 70 degrees another beautiful day clear skies so now all that remains would be to go i could go plug in a form now if i wanted or maybe i just want a drop down for users so they can only choose a few cities there's a number of ways i could get what i want to search for here um and i could plug this code in very easily from here i think i'm going to stop here this movie's gone on long enough hopefully this helped you if you were working with the open weather map or maybe you just wanted to see a live code example of how to work with the fetch api if you found this helpful please go ahead and give it a thumbs up feel free if you have questions to ask in the comments you know i can't promise a timely response but i do check them from time to time and try to respond if somebody has any questions

Channel: Median Man

Views: 8,970

Keywords: javascript, fetch, api, openweathermaps

Id: Mc1w6Q-nxzM

Length: 25min 44sec (1544 seconds)

Published: Sun Mar 28 2021