Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    95
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Smile Retrieving info from json (Never tried this before)

    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.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>
    Last edited by xelawho; 03-13-2013 at 09:01 PM.

  • Users who have thanked xelawho for this post:

    Nealec (03-13-2013)

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>

  • Users who have thanked xelawho for this post:

    Nealec (03-13-2013)

  • #4
    New Coder
    Join Date
    Feb 2011
    Posts
    95
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    95
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    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.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ... 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>

  • #8
    New Coder
    Join Date
    Feb 2011
    Posts
    95
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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?
    Last edited by Nealec; 03-13-2013 at 10:03 PM.

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,375
    Thanks
    11
    Thanked 592 Times in 572 Posts
    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.
    Last edited by rnd me; 03-14-2013 at 12:29 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,375
    Thanks
    11
    Thanked 592 Times in 572 Posts
    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>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    LinkBacks (?)

    1. 02-26-2014, 11:11 PM

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •