How do you get a 3 day forecast with JavaScript ?

  • 1
  • Question
  • Updated 5 years ago
Hi i am having trouble getting the .json information from the API onto my site. I am currently trying to use this code...

var Forcast = parsed_json['forecast']['txt_forecast']['forecastday'][0]['fcttext_metric'];

but that's just me guessing. i have no idea how to get info from a json file :S i have the conditions working for normal days but i cant seem to get the forecast to work :/

Some help would be great :)
Photo of strydom

strydom

  • 8 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of afelicioni

afelicioni

  • 227 Posts
  • 43 Reply Likes
If that is a result from the example published in docs, seems to be fine

So, the following code is a working example for 3 days forecast



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$.ajax({
url : "http://api.wunderground.com/api/YOURAPIKEY/forecast/q/IA/Cedar_Rapids.json",
dataType : "jsonp",
success : function(parsed_json) {
var v1 = parsed_json['forecast']['txt_forecast']['forecastday'];
for (index in v1) {
alert('Weather forecast for '+v1[index]['title']+' is '+v1[index]['fcttext_metric']);
}
}
});
});
</script>
Photo of Clemeeent

Clemeeent

  • 1 Post
  • 0 Reply Likes
That's make a 10 days forecast no ?
Photo of afelicioni

afelicioni

  • 227 Posts
  • 43 Reply Likes
According to http://www.wunderground.com/weather/a...
Returns a summary of the weather for the next 3 days. This includes high and low temperatures, a string text forecast and the conditions.


A ten days forecast feature is available as forecast10day feature: http://www.wunderground.com/weather/a...
Photo of strydom

strydom

  • 8 Posts
  • 0 Reply Likes
Thanks a bunch! i just didn't know how to get the specific bits of info but the example you gave cleared that up for me.

for (index in v1) {
alert('Weather forecast for '+v1[index]['title']+' is '+v1[index]['fcttext_metric']);}
Photo of strydom

strydom

  • 8 Posts
  • 0 Reply Likes
I have one more question and that is how would i specify which period i want the info for? as the code you gave just gives random days :/
Photo of afelicioni

afelicioni

  • 227 Posts
  • 43 Reply Likes
I don't know if I got it, maybe it is due to forecast API feature output structure.

In depth, an API call response is splitted into txt_forecast and simpleforecast: the main difference between them its in the length of their "children", so txt_forecast doubles the items for each day giving you daily an d nightly forecast. Maybe it's this behaviour looked as odd in the above JS for cycle?

I just used txt_forecast because it was in first post, but if this leads to code mess maybe it's better to study the sencond response part contained into simpleforecast to get datas to fetch. Remember you can always get the API URL call (ex. "http://api.wunderground.com/api/YOURA...") via your browser and save the response to your disk to study it later!
Photo of strydom

strydom

  • 8 Posts
  • 0 Reply Likes
i understand all this but i am a true novice when it comes to JavaScript and coding in general so i am a bit clueless on how to do all this.

The example code you gave just seems to give me random days of the week (which i actually expected) as the code does not specify which period you want the information from...

You have helped me a lot so far to getting the data from the json file but now i need a way of specifying which period(day) i want the data from.

Here is my code at the moment...

jQuery('#GetWeather').click(function() {
var PostCode=" ";
$.ajax({ url : "http://api.wunderground.com/api/2508132ae0c7601a/geolookup/forecast/q/UK/"+PostCode +".json",
dataType : "jsonp",
success : function(parsed_json) {

var Forcast = parsed_json['forecast']['simpleforecast']['forecastday'];

for (index in Forcast) {
var imageurl = "http://........";
$('.Wicon').css('background-image',"url("+imageurl+Forcast[index]['icon']+".svg)");
$('#GetWeatherState').html(+Forcast[index]['conditions']);
$('#GetWeatherTempHigh').html('High of '+Forcast[index]['high']['celsius']+'&#8451');
$('#GetWeatherTempLow').html('Low of '+Forcast[index]['low']['celsius']+'&#8451');
$('#GetWeatherMaxWind').html('Max Wind '+Forcast[index]['maxwind']['mph']+' Mph');
$('#GetWeatherAveWind').html('Average Wind '+Forcast[index]['avewind']['mph']+' Mph');
$('#GetWeatherHumidityA').html('Average '+Forcast[index]['avehumidity']);
}
}
});
}) ;
Photo of strydom

strydom

  • 8 Posts
  • 0 Reply Likes
Never Mind i didn't realize i could put the period where you wrote [index]
Photo of strydom

strydom

  • 8 Posts
  • 0 Reply Likes
But now i have another problem! I cant seem to get the date using this method... $('#GetWeatherState').html(+Forcast[0]['date']['weekday']); The "conditions" don't seem to work either... i just get 'NaN'
Photo of afelicioni

afelicioni

  • 227 Posts
  • 43 Reply Likes
Glad my JS skills helped, but please avoid using the plus sign leaving no variable or string or number to the left: this raises the NaN (aka Not-a-Number).

I think I'm not supposed to write some bla-bla-js-bla-math (you can't force a variable string to be "positive") so in your case you can add a "" (as empty string) to the left or just delete the plus sign where you're not concatenating strings.