Retrieving info from json (Never tried this before)

Nealec · 03-13-2013, 08:30 PM

Hi I am trying to get and display information from this url: http://api.openweathermap.org/data/2...2?units=metric

All I need is to display from the json is the following, the rest of the information is not needed.

Date:
Max Temp:
Min Temp:
Icon:

There should be 7 days worth I think.

Oh and I need to be in a html page so no php.

I am VERY new to javascript, had never heard of json before today so any help would be great, Thanks.

xelawho · 03-13-2013, 08:59 PM

Hi Nealec,

first question: are you in Huehue, or was that a random selection?

secondly, the url that you gave provides 60 results. You can read about refining it here:
http://openweathermap.org/wiki/API/2.1/JSON_API

this may give you a start, although I suspect that the "icon" value may not be what you're looking for...

Code:

<!HTML>
<html>
<head>
</head>
<body>
<div id="res"></div>
<script type="text/javascript">
function getData(o){
var thediv=document.getElementById("res");
thediv.innerHTML="Weather for "+o.city.name+"<br>";
for (var i = 0; i < o.list.length; i++) {
var deets=o.list[i];
thediv.innerHTML+=deets.dt_txt+"<br>"
+"Min: "+deets.main.temp_min+"<br>"
+"Max: "+deets.main.temp_max+"<br>"
+"Icon: "+deets.weather[0].icon+"<br>";
	}
}

</script>
<script src="http://api.openweathermap.org/data/2.1/forecast/city/UKXX0102?units=metric&callback=getData"></script>
</body>
</html>

xelawho · 03-13-2013, 09:16 PM

with icons...

Code:

<!HTML>
<html>
<head>
</head>
<body>
<div id="res"></div>
<script type="text/javascript">
function getData(o){
var thediv=document.getElementById("res");
thediv.innerHTML="Weather for "+o.city.name+"<br>";
for (var i = 0; i < o.list.length; i++) {
var deets=o.list[i];
thediv.innerHTML+="Date & Time: "+deets.dt_txt+"<br>"
+"Min: "+deets.main.temp_min+"<br>"
+"Max: "+deets.main.temp_max+"<br>"
+"<img src='http://openweathermap.org/img/w/"+deets.weather[0].icon+".png'/><br>";
	}
}

</script>
<script src="http://api.openweathermap.org/data/2.1/forecast/city/UKXX0102?units=metric&callback=getData"></script>
</body>
</html>

Nealec · 03-13-2013, 09:26 PM

Ok that is odd. I have never heard of huehue, I am in Northampton UK and when I go to the url I gave it says Northampton but your code displays huehue for some reason.

Also I only really need the next 7 days worth and I plan to make my own Icons anyway.

Any ideas what happened with huehue?

Thank you for what you have already done though, I have spent all day long just trying to get anything to display.

Nealec · 03-13-2013, 09:29 PM

Quote:

Originally Posted by xelawho

with icons...

Code:

<!HTML>
<html>
<head>
</head>
<body>
<div id="res"></div>
<script type="text/javascript">
function getData(o){
var thediv=document.getElementById("res");
thediv.innerHTML="Weather for "+o.city.name+"<br>";
for (var i = 0; i < o.list.length; i++) {
var deets=o.list[i];
thediv.innerHTML+="Date & Time: "+deets.dt_txt+"<br>"
+"Min: "+deets.main.temp_min+"<br>"
+"Max: "+deets.main.temp_max+"<br>"
+"<img src='http://openweathermap.org/img/w/"+deets.weather[0].icon+".png'/><br>";
	}
}

</script>
<script src="http://api.openweathermap.org/data/2.1/forecast/city/UKXX0102?units=metric&callback=getData"></script>
</body>
</html>

Haha this one says Im in Hollister! I am getting very confused.

xelawho · 03-13-2013, 09:51 PM

ha, ha. me too

using this line:

Code:

<script src="http://api.openweathermap.org/data/2.1/forecast/city/UKXX0102?units=metric&callback=getData"></script>

now gets me Northampton

xelawho · 03-13-2013, 09:53 PM

... and then when I refreshed the page it gave me Huehue again...

maybe safer to name the city:

Code:

<script src="http://api.openweathermap.org/data/2.1/forecast/city?q=Northampton&units=metric&callback=getData"></script>

Nealec · 03-13-2013, 10:01 PM

Yeah it has just changed to Northampton for me also, strange.

Would you also be able to help me convert the dates into just weekdays like Mon, Tues and so on?

Oh and can it be cut down to just show 7 days including current day?

rnd me · 03-13-2013, 10:57 PM

there's a new lib i'm building that makes this process super simple. It's based on an old IE technology called data binding. It should allow you to create such a feature without writing a single line of JS.

I'm still working on it, but it's an active project and is already usable in modern browsers. Over the next week i will be adding unit tests and legacy browser compatibility. These would not change the existing syntax, which is frozen.

at any rate, my goal is to enable what you described in post #1 with the following code:

Code:

<!DOCTYPE HTML><html>
<head>				  <title>weather</title>
</head><body>

<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id=tdcWeath >
	<param name=DataURL value="http://api.openweathermap.org/data/2.1/forecast/city/UKXX0102?units=metric&callback=demo" />
	<param name=DataPath value=".list" />
	<param name=Limit   value="7" />
</object>



  <ol datasrc=#tdcWeath>
	<li style=display:inline-block;width:300px;padding:1em; >
		<div><b>Date</b><span	datafld=dt_txt></span></div> 
		<div><b>max</b><span	datafld=main>@value.temp_max</span></div> 		
		<div><b>min</b><span	datafld=main>@value.temp_min</span></div> 		
	</li>
  </ol>


<hr />

<script src="http://danml.com/bind/"></script>

</body>
</html>

you can read about the various options and kick the tires on a dozen or so demos at danml.com/bind/

EDIT: added limit param support, removed cautionary note about it.

xelawho · 03-14-2013, 12:12 AM

cool.

In the meantime, OWM has a daily compact forecast which appears to be more or less what you're looking for (the other one gives you max and min temperatures at 4 times throughout the day, which makes no sense to me)

the problem with the daily compact is that it doesn't give you the min temperature (it gives you 3 throughout the day), and it gives you something called "temp" which it looks like we can assume is the max temperature.

Which doesn't really jibe with the BBC forecast, but it ends up something like this, anyway...

Code:

<!HTML>
<html>
<head>
</head>
<body>
<div id="res"></div>
<script type="text/javascript">
function getData(o){
var thediv=document.getElementById("res");
thediv.innerHTML="Weather for "+o.city.name+"<br>";
for (var i = 0; i < o.list.length; i++) {
var deets=o.list[i];
var theday=new Date(deets.dt*1000).toDateString().split(" ")[0]
thediv.innerHTML+="Forecast for "+theday+"<br>"
+"Min: "+Math.min(deets.morn,deets.night,deets.eve)+"<br>"
+"Max: "+deets.temp+"<br>"
+"<img src='http://openweathermap.org/img/w/"+deets.weather[0].icon+".png'/><br>";
		}
}

</script>
<script src="http://api.openweathermap.org/data/2.1/forecast/city?q=Northampton&units=metric&mode=daily_compact&callback=getData"></script>
</body>
</html>

rnd me · 03-14-2013, 01:19 AM

that is a better source.

Code:

<!DOCTYPE HTML><html>
<head>				  <title>weather2</title>
</head><body>

<object classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" id=tdcWeath >
	<param name=DataURL value="http://api.openweathermap.org/data/2.1/forecast/city?q=Northampton&units=metric&mode=daily_compact&callback=getData" />
	<param name=DataPath value=".list" />
	<param name=limit   value="7" />
</object>

<style> b{ display: inline-block; width: 3em; } </style>


  <ol datasrc=#tdcWeath>
	<li style=display:inline-block;width:300px;padding:1em; >
		<div><b>Date</b><span	datafld=dt>@ new Date(value*1000).toLocaleDateString()</span></div> 
		<div><b>max</b><span	datafld=temp>@ Math.max(value, row.night, row.morn, row.eve)</span></div> 		
		<div><b>min</b><span	datafld=temp>@ Math.min(value, row.night, row.morn, row.eve)</span></div> 		
		<div><b>icon</b><img datafld='weather' src="@ 'http://openweathermap.org/img/w/'+value[0].icon+'.png' "/></div> 		
	</li>
  </ol>

<script src="http://danml.com/bind/"></script>

</body>
</html>