OpenWeatherMap API Tutorial 2021
HTML-код
- Опубликовано: 2 дек 2024
- This video explains how you can use the OpenWeatherMap API and geolocation to create embedded weather data on your webpages for any location using the One Call API.
The different APIs available through Open Weather Map APIs are also discussed.
Code from video: gist.github.co...
Bootstrap Framework Cards reference: getbootstrap.c...
OpenWeatherMap API Plans: openweathermap...
OpenWeatherMap One-Call reference: openweathermap...
OpenWeatherMap Icon reference: openweathermap...
I actually use that api to get city longitude/latitude, since I was too lazy to find a database, I used this API to fill the database automatically whenever we need the longitude/latitude of a city
gave me an idea to solve an issue with displaying the icons! thank you, great job!
This is great! Wow, I didn't know that we can limit the number of elements map returns! I needed it so many times. This is effectively like using break in a for loop! I think last time when I used this API, about 9 months ago, the free option did not have all this data. This is fantastic, I can now attempt a lot more complex weather app, perhaps this time using React, just for practice.
I haven't implemented this but i wanna thank you in advance. I'm bagging this degree no matter what!.
Thanks! Your video helped me a lot to understand how to work effectively with the OpenWeather API .
Dear Steve, thank you for this video and providing such a well coded and explained example for a small html5 application. Knowledge transfer can be so easy and smart. I give you 5 of 5 stars! *****
Again a Wonderful Video from Steve. Kudos to your effort 👏👏👏
Great video and well-explained as always Steve! Thank you very much, i've learned a good deal from a few of your tutorials. Cheers!
Perfect! Just what I needed--short and to the point.
Dear Sir, thanks for this.
Do you recommend API for the weather forecaster on duty at a national weather office especially when answering calls to give a particular caller answers? How about information about a weather forecast, would that possible with API?
It's an excellent API for weather data.
I don't know the specifics of that job or what data it needs so I can't comment about that.
It depends on what information you want about a weather forecast. I would recommend reading the guide and faq on the website for more information - openweathermap.org/guide
@@SteveGriffith-Prof3ssorSt3v3 Thanks
in the current => weather , i got morethan 1 weather, which one is the current weather?
It is an array because there can be multiple things happening in the same area. Each type of current weather has a different icon and label.
I got error:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at Object.init (index.html:20:7)
at index.html:112:5
Whenever you see the error message "cannot read properties of null" look on the line where the error occurred at the keyword the browser was "reading". It means what ever was in front of the keyword is null.
So, you are trying to access a variable or property that has not been declared or assigned yet. Maybe you are trying to access it before the page has finished loading / or before DOMContentLoaded. Maybe you are loading the script without defer or async and trying to run it before the page is ready.
@@SteveGriffith-Prof3ssorSt3v3 All fixed, thanks a lot!
Hey steve. I hope you are doing well. I am facing a problem. I want to show the timezone or you can say the city name. but it is not showing in the html template. I am using this into the return code that you have written ${timezone}. but not working. can you kindly give me a solution that how can I show the city name.
It all depends on what you are putting into your variable timezone. Timezone is in a different part of the data that is returned. It is not inside "daily".
thanks sir, for the tutorial,
Does openweather's review provide the Rainfall and Forecast values, for the territory of Indonesia... I want to make a WebGIS for Rainfall Distribution Map
You will have to check their documentation. I don't know.
Cant get it working due to the .js file button listener on line 5 (supposedly). I get an error in the console when I load the page saying Cannot read properties of null (reading 'addEventListener') citing app.js:5:5. I tried swapping out various values and api keys and variable syntax and concatenating methods, always the same error =(
Watched every minute of the video too. Don't know what I'm missing but it's obviously a 'me' thing. Very nice looking ap. I just wish I could get it working.
Are you loading the script and trying to add the event listener before the DOM is loaded? The error about null is telling you that it doesn't have a reference in the thing that is in front of addEventListener.
@@SteveGriffith-Prof3ssorSt3v3 I don't remember but I copy pasted verbatim from your git files while trying to fix - still got the same error
@@coryu.1022 are you running the page over not file:///
It gives an 401 error when I use onecall , but it works with weather and forecast
401 means unauthorized. It means that your api key is not allowed to use onecall.
Not sure which APIs are paid and which are free currently.
Hi Steve, thank you for your helpful tutorial.
Question: in fetchWeather(), why do you use a promise chain and not the async/await method with a try/catch?
I prefer the promise chain syntax.
I like to be able to pass functions that are declared and used elsewhere into the then( ) methods, like this:
fetch(url)
.then(validate)
.then(parseData)
.then(buildHTML)
.then(messageUser)
.catch(console.warn);
@@SteveGriffith-Prof3ssorSt3v3 Got it. Thank you 🙏
can we retrieve historical or past weather data?
As long as you pay for the right licence you can
@@SteveGriffith-Prof3ssorSt3v3 how to do that do you have any tutorial how to get past history weather data?
Can you please explain FinalizationRegistry and WeakRef
Please add any tutorial requests in the comments here - ruclips.net/video/LCezax2uN3c/видео.html
Congratulations, great video, very well explained.
I have a question, how could I do a direct search by city name instead of longitude and latitude?
openweathermap.org/current#name
@@SteveGriffith-Prof3ssorSt3v3 Thxx
Great Work Sir,
Is there a way to automate the fetching base on the condition of the code?
Sorry. I don't understand your question.
@@SteveGriffith-Prof3ssorSt3v3 sorry about that, thanks for the fast reply. I mean I want to use weather API for our capstone project, we need to get weather forecast from a weather API then we need to send the weather forecast, the problem is that we need to send the weather forecast for 15 different places at the same time, is there a way for me to automate the sending process to 15 different places?
@@clentargerototing2792 it would be 15 separate calls but you can wrap them all in a Promise.all call
@@SteveGriffith-Prof3ssorSt3v3 thanks so much
awesome video. is there a chance to get a different video using async and await?
The video is about the API. I won't be making a different version or multiple versions of the code. It can be written many different ways.
I have a video on using async and await with fetch if you want to do that for yourself. ruclips.net/video/ycJOZp_wWak/видео.html
Hey Steve! I have used the code you have provided but it was giving me a 401 error so I replaced the one call api with the weather api so it's no longer giving me that error, but now it throws an error which says "caught (in promise) TypeError: Cannot read properties of undefined (reading 'map')
at Object.showWeather (where-is-the-pub-crawl:1033:8)
at where-is-the-pub-crawl:1004:13s"
Can you please help me what I need to do to get rid of this error. Great Job you are making authentic content that's helping us newbies!
Yeah they changed the free version features after I made this video. So, you have to change which end points you use for free, which you already figured out. The different end points will have different properties. So, you have to call the map method on the right property. I would suggest that you just console out the response and look to see which property is the array. You can only call map on an Array.
Nice!
Thanks!!!
I hope by now you have gotten a mic that does not transmit all your keystrokes, very annoying.
they changed their pricing, and what you can access in the free plan
they still have quite a bit you can use - current weather and 5 day forecast.
@@SteveGriffith-Prof3ssorSt3v3 yes, thank you for the explaination
thanks sir, for the tutorial, Does openweather's review provide the Rainfall and Forecast values, for the territory of Indonesia... I want to make a WebGIS for Rainfall Distribution Map