Get weather details by City Name

Hello Everyone,

In this tutorial I will let you know, how to get live weather details from OPEN Weather API.

And going to create Country, State and City list from api using Jquery and Javascript.

Our Output will looks like this:

Let’s start with the coding part:

For api I am using Sachtech API as follow :

All Countries : http://stsmentor.com/locationapi/locationApi.php?type=getCountries

All States by country id : http://stsmentor.com/locationapi/locationApi.php?type=getStates&countryId=<<country_id>>

City By State Id : http://stsmentor.com/locationapi/locationApi.php?type=getCities&stateId=<<state_id>>

Now lets start with the process to get country list i have used follow code to achieve this:

$(document).ready(function(){
$.ajax({
url: "http://stsmentor.com/locationapi/locationApi.php?type=getCountries",
success: function(data){
var country = "<select onchange='getState();' class='form-control count'>";
$.each(data['result'],function(key, value){
$.each(value, function(keys, vals) {
country += "<option value='"+keys+"'>"+vals+"</option>";
});
});
country += "</select>";
$('.country').html(country);
}
});
});

Ajax is an important part here to get data from the JSON link and show it in the div with class country.

I have used onchange JS method here to get data from another api.

here is the script to get states data from api:

function getState(){
var a = $('.count').val();
$.ajax({
url: "http://stsmentor.com/locationapi/locationApi.php?type=getStates&countryId="+a,
success: function(data){
var state = "<select onchange='getCity();' class='form-control stat'>";
$.each(data['result'],function(key, value){
$.each(value, function(keys, vals) {
state += "<option value='"+keys+"'>"+vals+"</option>";
});
});
state += "</select>";
$('.state').html(state);
}
});
}

You can see in above code I have used onchange method to get select options of city.

Here is the code for getting city’s data from state id:

function getCity(){
var a = $('.stat').val();
$.ajax({
url: "http://stsmentor.com/locationapi/locationApi.php?type=getCities&stateId="+a,
success: function(data){
var city = "<select onchange='getWeather();' class='form-control cit'>";
$.each(data['result'],function(key, value){
$.each(value, function(keys, vals) {
city += "<option>"+vals+"</option>";
});
});
city += "</select>";
$('.city').html(city);
}
});
}

Now in the last i have called our main function to get weather data from the open weather api.

In this i have used my own keys generated on openweather website. If you want to create your own keys please visit open weather website.

Lets see the code for getting weather information from api :

function getWeather(){
var a = $('.cit').val();
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q="+a+"&units=metric&appid=21e696f4e0e757c95340595f106183b3",
success: function(data){
if(data.cod == '404'){
alert("Sorry City Not Found");
}else{
$('.aa').html(data.main.temp);
}
}
});
}

If the city requested by user is not available with the open weather database then I have generate an error says city not found.

Here is the full code for the Get weather details by City Name :

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Get Weather</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "http://stsmentor.com/locationapi/locationApi.php?type=getCountries",
success: function(data){
var country = "<select onchange='getState();' class='form-control count'>";
$.each(data['result'],function(key, value){
$.each(value, function(keys, vals) {
country += "<option value='"+keys+"'>"+vals+"</option>";
});
});
country += "</select>";
$('.country').html(country);
}
});
});
function getState(){
var a = $('.count').val();
$.ajax({
url: "http://stsmentor.com/locationapi/locationApi.php?type=getStates&countryId="+a,
success: function(data){
var state = "<select onchange='getCity();' class='form-control stat'>";
$.each(data['result'],function(key, value){
$.each(value, function(keys, vals) {
state += "<option value='"+keys+"'>"+vals+"</option>";
});
});
state += "</select>";
$('.state').html(state);
}
});
}
function getCity(){
var a = $('.stat').val();
$.ajax({
url: "http://stsmentor.com/locationapi/locationApi.php?type=getCities&stateId="+a,
success: function(data){
var city = "<select onchange='getWeather();' class='form-control cit'>";
$.each(data['result'],function(key, value){
$.each(value, function(keys, vals) {
city += "<option>"+vals+"</option>";
});
});
city += "</select>";
$('.city').html(city);
}
});
}

function getWeather(){
var a = $('.cit').val();
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q="+a+"&units=metric&appid=21e696f4e0e757c95340595f106183b3",
success: function(data){
if(data.cod == '404'){
alert("Sorry City Not Found");
}else{
$('.aa').html(data.main.temp);
}
}
});
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="country mt-3">

</div>
<div class="state mt-3">

</div>
<div class="city mt-3">

</div>
<h1 class="text-center display-1 mt-3 aa"></h1>
</div>
</div>
</div>
</body>
</html>

 

46 thoughts on “Get weather details by City Name

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Its like you read my mind! You seem to know a lot about this, like you wrote the book in it or something. I think that you could do with some pics to drive the message home a little bit, but other than that, this is magnificent blog. A great read. I’ll definitely be back.

  2. Thank you, I’ve recently been searching for info approximately this topic for ages and yours is the best I have found out so far. However, what concerning the conclusion? Are you positive about the supply?

  3. This is very interesting, You’re a very skilled blogger. I’ve joined your rss feed and look forward to seeking more of your great post. Also, I have shared your website in my social networks!

  4. Great post. I used to be checking constantly this weblog and I am inspired!
    Very useful information specifically the ultimate phase 🙂 I take care of such information a lot.
    I was looking for this particular information for a long time.
    Thank you and good luck.

  5. Woah! I’m really enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s tough to get that “perfect balance” between user friendliness and appearance. I must say that you’ve done a fantastic job with this. Also, the blog loads extremely fast for me on Opera. Exceptional Blog!

  6. Wow! This could be one particular of the most beneficial blogs We have ever arrive across on this subject. Basically Fantastic. I’m also an expert in this topic so I can understand your hard work.

  7. I would like to thnkx for the efforts you’ve put in writing this site. I’m hoping the same high-grade site post from you in the upcoming also. Actually your creative writing abilities has encouraged me to get my own web site now. Actually the blogging is spreading its wings rapidly. Your write up is a great example of it.

  8. I cling on to listening to the reports lecture about receiving free online grant applications so I have been looking around for the finest site to get one. Could you advise me please, where could i acquire some?

  9. Can I recently say what a relief to seek out a person that really knows what theyre preaching about on-line. You definitely learn how to bring a difficulty to light to make it essential. The best way to should ought to see this and can see this side of your story. I cant believe youre less well-known since you certainly provide the gift.

  10. I just want to mention I am very new to blogging and site-building and certainly enjoyed this web site. More than likely I’m going to bookmark your site . You really have fabulous well written articles. Appreciate it for sharing your web-site.

  11. The other day, while I was at work, my sister stole my iPad and tested to see if it can survive a forty foot drop, just so she can be a youtube sensation. My apple ipad is now broken and she has 83 views. I know this is completely off topic but I had to share it with someone!

  12. Howdy just wanted to give you a quick heads up. The words in your post seem to be running off the screen in Chrome. I’m not sure if this is a format issue or something to do with internet browser compatibility but I thought I’d post to let you know. The style and design look great though! Hope you get the issue solved soon. Kudos

  13. Wow that was strange. I just wrote an extremely long comment but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Regardless, just wanted to say wonderful blog!

  14. Hi there very nice site!! Guy .. Beautiful .. Superb .. I’ll bookmark your web site and take the feeds additionally…I am satisfied to find a lot of helpful info here in the post, we want develop extra techniques on this regard, thanks for sharing. . . . . .

  15. Hi would you mind stating which blog platform you’re using? I’m looking to start my own blog in the near future but I’m having a tough time making a decision between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design seems different then most blogs and I’m looking for something completely unique. P.S My apologies for being off-topic but I had to ask!

  16. Please let me know if you’re looking for a author for your weblog. You have some really good posts and I feel I would be a good asset. If you ever want to take some of the load off, I’d love to write some articles for your blog in exchange for a link back to mine. Please blast me an e-mail if interested. Cheers!

  17. hello there and thank you for your information – I have certainly picked up anything new from right here.
    I did however expertise some technical points using this website,
    as I experienced to reload the web site a lot
    of times previous to I could get it to load correctly. I
    had been wondering if your hosting is OK? Not that I’m complaining, but sluggish loading instances times will very frequently affect your placement in google and could damage your
    high-quality score if advertising and marketing with Adwords.
    Anyway I’m adding this RSS to my e-mail and can look out for
    much more of your respective interesting content. Ensure that you update this again soon.

  18. My partner and I stumbled over here different web address and thought I should check things out.
    I like what I see so now i am following you. Look forward to
    checking out your web page for a second time.

  19. I’m truly enjoying the design and layout of your blog.
    It’s a very easy on the eyes which makes it much more enjoyable for me to
    come here and visit more often. Did you hire out a designer to create your theme?
    Excellent work!

  20. I don’t know whether it’s just me or if perhaps everyone else experiencing problems with your website.
    It looks like some of the text within your posts are running off the screen. Can someone else
    please comment and let me know if this is happening to them
    too? This may be a issue with my browser because I’ve had this happen previously.
    Many thanks

  21. Whats up this is somewhat of off topic but I was wondering if blogs use
    WYSIWYG editors or if you have to manually code with
    HTML. I’m starting a blog soon but have no coding knowledge so I wanted to get guidance from someone with experience.

    Any help would be enormously appreciated!

  22. Heya i’m for the primary time here. I found this board and
    I find It truly helpful & it helped me out much. I am hoping to offer something again and aid others like you aided me.

  23. The weather tutorial and create some of favorable details for the JavaScript is possible by the way of online. The list of countries are run by the output and submit the great result for the readers. The location and state are provide the process of writing and getting helps from online experts. You can follow the necessary steps for learn about full part of Java with that. The coding methods, output code and secure types of messages are submitted for the readers here

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.