magento two magento two - 5 months ago 42
HTML Question

OpenWeather: not getting data

I am trying to get the Last 7 days weather info, but it's not returning anything. When I enter the url from browser it's working and returning

xml
format code. But when I run my html with jquery code it's not executing. could you please suggest me where I went wrong?

my code is:

<!doctype html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta charset="utf-8">

<title>OpenWeatherMap API jQuery Plugin</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<style>

/* for presentation only */

body {
font: 16px Arial, Helvetica, sans-serif;
margin: 0;
}

.weather-wrapper {
background: skyblue;
margin: 5% 0 5% 5%;
padding: 40px 5%;
float: left;
color: white;
width: 70%;
max-width: 400px;
}

strong {
color: steelblue;
}

.capitalize {
text-transform: capitalize;
}

.hide {
display: none;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="application/javascript">

$(document).ready(function(){

$.getJSON('http://api.openweathermap.org/data/2.5/forecast/daily?q=Hyderabad,IN&mode=xml&appid=c9d49310f8023ee2617a7634de23c2aa',function(result){
console.log(result);

});


});
</script>

</head>

<body lang="en">

<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='js/lib/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}


</script>

<script src="js/plugins/openWeather.min.js"></script>


</body>

</html>

Answer

getJSON function expects to return JSON data. So you need a function that can return XML data like this:

$.ajax({
    type: "get",
    url: "http://api.openweathermap.org/data/2.5/forecast/daily?q=Hyderabad,IN&mode=xml&appid=c9d49310f8023ee2617a7634de23c2aa",
    dataType: "xml",
    success: function(data) {
        /* handle data here */
    },
    error: function(xhr, status) {
        /* handle error here */
    }
});

Now this function can return xml data (dataType: "xml")

You can also change the url to return JSON data: http://api.openweathermap.org/data/2.5/forecast/daily?q=Hyderabad,IN&mode=json&appid=c9d49310f8023ee2617a7634de23c2aa

I changed mode=json in the url

Comments