You can fetch the Live weather data using api in Liferay.
You can make ajax call .
Follow these steps.
1) Create a Liferay Module Project.
Open the view. jsp and paste the below code
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery(function($){
function getWeather(){
$.ajax('http://api.wunderground.com/api/c6dc8e785d943109/conditions/q/AZ/Chandler.json', {
dataType: 'jsonp',
success: function(json) {
$('div#city strong').text(json.current_observation.display_location.full)
$('div#icon').html('<img src=' + json.current_observation.icon_url + '>')
$('div#weather').text(json.current_observation.temperature_string + " " + json.current_observation.weather);
$('div#time').text(json.current_observation.observation_time_rfc822);
}
});
}
$('a.get_weather').click(function(e) {
e.preventDefault();
$(this).hide();
getWeather();
$('#result').fadeIn(1000);
});
$('a.hide').click(function(e) {
e.preventDefault();
$('#result').hide();
$('a.get_weather').show();
})
})
</script>
<header class="seats-header">
<h1>Weather</h1>
</header>
<div><a href="#" class="get_weather">Get weather</a></div>
<div id="result" style="display: none">
<div id="icon"></div>
<div id="city"><strong></strong></div>
<div id="weather"></div>
<div id="time"></div>
<div><a href="#" class="hide">Hide</a>
</div>
</body>
2) Add Javascript CDN in your code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
3)No w go to https://openweathermap.org/api website and get the url which gives you
whether report based on city name and country which we are passing as inputs.
Now deploy and check it will show current weather based on your Input.
