Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I use Json Jquery in api.openweathermap to get weather information

Tags:

jquery

weather

I have this api

 http://api.openweathermap.org/data/2.5/forecast/daily?q=Montpellier&mode=json&units=metric&cnt=10 

and I will get the information (name of city, weather...) using Jquery .

how I can do that ??

like image 314
HamidS Avatar asked Oct 29 '25 04:10

HamidS


1 Answers

Use an ajax call to get the JSON like this

$(document).ready(function(){
$.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?q=Montpellier&mode=json&units=metric&cnt=10",function(result){
    alert("City: "+result.city.name);
    alert("Weather: "+ result.list[0].weather[0].description);
    });
});

Here's the fiddle: http://jsfiddle.net/cz7y852q/


If you do not want to use jQuery:

var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
           if (xmlhttp.status == 200) {
              var data = JSON.parse(xmlhttp.responseText);
              //access json properties here
              alert("Weather: "+ data.weather[0].description);
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };
    xmlhttp.open("GET", "http://api.openweathermap.org/data/2.5/weather?id=524901&APPID=7dba932c8f7027077d07d50dc20b4bf1", true);
    xmlhttp.send();

Use your own API key if the one in the URL does not work.

like image 85
Harshul Pandav Avatar answered Oct 31 '25 21:10

Harshul Pandav



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!