Geek Answers Handbook

OpenWeather API - pulling JSON data

I am writing a bit of JavaScript to retrieve information from JSON that contains a call to name, longitude, latitude, and the openweather API. I need to get the API information from an API call in an HTML page so that you can get the weather forecast for each information. I have two elements working separately, but I cannot figure out how to make them work together.

Help me please?:-)

Weather API Example by d.weather

api.openweathermap.org/data/2.5/forecase?lat=50.8609&lon=-0.08014&&units=metric

Openweather json output HTML page

 <html> <head> <title>Weather</title> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.7.min.js" ></script> <script src="http://code.jquery.com/ui/1.7.0/jquery-ui.js" ></script> <script> function getWeather(callback) { var weather = 'http://api.openweathermap.org/data/2.5/forecast?lat=51.5072&lon=0.1275&units=metric'; $.ajax({ dataType: "jsonp", url: weather, success: callback }); } // get data: getWeather(function (data) { console.log('weather data received'); console.log(data.list[0].weather[0].description); console.log(data.list[0].weather[0].main); }); getWeather(function (data) { document.write('weather data received'); document.write('<br>'); document.write(data.list[0].weather[0].description); document.write('<br>'); document.write(data.list[0].weather[0].main); document.write('<br>'); document.write(data.list[0].main.temp); document.write('<br>'); document.write(data.list[0].main[0].dt_txt); document.write('<br>'); }); </script> </body> </html>

HTML page for outputting JSON data

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script> <!-- Javascript --> <script type="text/javascript"> function loadUrl(newLocation){ window.location = newLocation; return false; } </script> <script type="text/javascript"> $(document).ready(function (){ $("#btn382").click(function(){ /* set no cache */ $.ajaxSetup({ cache: false }); $.getJSON("weather.json", function(data){ var html = []; /* loop through array */ $.each(data, function(index, d){ html.push("Team : ", d.Teams, ", ", "Long : ", d.Long, ", ", "Lat : ", d.Lat, ", ", "Weather : ", d.Weather, "<br>"); }); $("#div381").html(html.join('')).css("background-color", "orange"); }).error(function(jqXHR, textStatus, errorThrown){ /* assign handler */ /* alert(jqXHR.responseText) */ alert("error occurred!"); }); }); }); </script> <!-- HTML --> <a name="#ajax-getjson-example"></a> <div id="example-section38"> <div>Football weather</div> <div id="div381"></div> <button id="btn382" type="button">Team location</button> </div>

weather.json

 { "Teams":"Wycombe Wanderers", "Long":-0.800299, "Lat":51.6306, "Weather":" api.openweathermap.org/data/2.5/weather?lat=51.6306&lon=-0.800299&mode=html" }, { "Teams":"Livingston", "Long":-3.52207, "Lat":55.8864, "Weather":" api.openweathermap.org/data/2.5/weather?lat=55.8864&lon=-3.52207&mode=html" }, { "Teams":"Brighton and Hove Albion", "Long":-0.08014, "Lat":50.8609, "Weather":" api.openweathermap.org/data/2.5/weather?lat=50.8609&lon=-0.08014&mode=html" },
+4
source share
3 answers

I have the basics that will help you on your journey. This is a mashup of your two pages.

First, I changed your getWeather function to call the weather, not the forecast. It takes a city parameter and adds this parameter to the data before calling the callback.

 function getWeather(city, callback) { var url = 'http://api.openweathermap.org/data/2.5/weather'; $.ajax({ dataType: "jsonp", url: url, jsonCallback: 'jsonp', data: { q: city }, cache: false, success: function (data) { data.city = city; callback(data); } }); }

Here, instead of your JSON commands, I made one in the form of a JS object, Arsenal and Liverpool and their respective cities were presented as data. The function moves around the object, retrieves the name of the city and passes it to getWeather . Data is returned and added to the div.

 $(document).ready(function () { $("#btn382").click(function () { var teams = { arsenal: { city: 'london' }, liverpool: { city: 'liverpool' } }; for (var team in teams) { var city = teams[team].city; getWeather(city, function(data) { var html = []; html.push('<div>') html.push('City: ', data.city, ', '); html.push('Lat: ', data.coord.lat, ', '); html.push('Lon: ', data.coord.lon, ', '); html.push('Weather: ', data.weather[0].description); html.push('</div>') $("#div381").append(html.join('')).css("background-color", "orange"); }); } }); });

Hope this gives you some ideas on how to solve this project.

See how it works.

+5
source

I made a complete example. For me it worked:

HTML file:

  <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <meta charset="utf-8"> <title>jQuery Ajax</title> <link rel="stylesheet" href="css/ajx-json-styles.css"> <script> function displayParsedData(data){ /* Working with the 'data' object (not string) here, now we can access the different properties available.*/ text = '<b>Name: </b>' + data.list[0].name + '<br/>'; text += '<b>message: </b>' + data.message + '<br/>'; text += '<b>Current Temperature: </b>' + data.list[0].main.temp + ' F<br/>'; text += '<b>Weather Conditions: </b>' + data.list[0].weather[0].description + '<br/>'; $('#parsed_json').append(text); } </script> <script> function test1() { getWeather(function (data) { $("#raw_json").html('<h2>callback</h2><pre>' + JSON.stringify(data, null, 2) + '</pre>'); displayParsedData(data); }); } function getWeather(callback) { var weather = 'http://openweathermap.org/data/2.1/find/city?lat=8.2924495&lon=-62.7373258'; $.ajax({ dataType: "jsonp", url: weather, success: callback }); } </script> <script> function test2() { $.ajax({ url: 'http://openweathermap.org/data/2.1/find/city?lat=8.2924495&lon=-62.7373258', type: 'GET', dataType:"jsonp", success: function(data) { $("#raw_json").html('<h2>$.ajax</h2><pre>' + JSON.stringify(data, null, 2) + '</pre>'); displayParsedData(data); }, error: function(jqXHR, textStatus, error) { alert( "error: " + jqXHR.responseText); } }); } </script> <script> function test3() { $.getJSON('http://openweathermap.org/data/2.1/find/city?lat=8.2924495&lon=-62.7373258&callback=?', function(data) { $("#raw_json").html('<h2>getJSON</h2><pre>' + JSON.stringify(data, null, 2) + '</pre>'); displayParsedData(data); }) .done(function() { alert( "second success" ); }) .fail(function() { alert( "error" ); }); } /*$.getJSON('http://openweathermap.org/data/2.1/find/city?lat=13.3428&lon=-6.2661&cnt=10&callback=?', function(data) { console.log(data); });*/ </script> <script> $(document).ready(function (){ $("#btn382").click(function(){ /* set no cache */ $.ajaxSetup({ cache: false }); $.getJSON("weather.json", function(data){ for (var team in data) { var html = []; html = '<div class="item"><b>Team: </b>' + data[team].Teams + '<br/>'; html += '<b>Lat: </b>' +data[team].Lat + '<br/>'; html += '<b>Lon: </b>' + data[team].Lon + '<br/>'; html += '<b>Weather: </b>' + data[team].Weather + '<br/></div>'; $("#div381").append(html); } }) .error(function(jqXHR, textStatus, errorThrown){ /* assign handler */ /* alert(jqXHR.responseText) */ alert("error occurred!"); }); }); }); </script> </head> <body> <div id="example-section38"> <div>Otra fuente</div> <div id="div381"></div> <button id="btn382" type="button">Team location</button> </div> <div id="raw_json"></div> <div id="parsed_json"></div> <button onclick="test1();">callback</button> <button onclick="test2();">$.ajax</button> <button onclick="test3();">getJSON</button> </body> </html>

weather.json

  [ { "Teams":"Wycombe Wanderers", "Lon":-0.800299, "Lat":51.6306, "Weather":" api.openweathermap.org/data/2.5/weather?lat=51.6306&lon=-0.800299&mode=html" }, { "Teams":"Livingston", "Lon":-3.52207, "Lat":55.8864, "Weather":" api.openweathermap.org/data/2.5/weather?lat=55.8864&lon=-3.52207&mode=html" }, { "Teams":"Brighton and Hove Albion", "Lon":-0.08014, "Lat":50.8609, "Weather":" api.openweathermap.org/data/2.5/weather?lat=50.8609&lon=-0.08014&mode=html" } ]

AJX-JSON-styles.css

 #raw_json { border:1px solid #333; background-color:#ccc; padding: 2em; word-wrap: break-word; margin-bottom: 2em; width: 40%; float: left; } #parsed_json { padding:2em; border: 1px solid blue; width: 40%; float: right; } h2 { margin:0; padding:0; } .item{ padding-bottom: 0.25em; padding-top: 0.25em; background-color: #E9BB18; border: 1px solid white; }
0
source

why don't you use xml instead of json, it's easy to parse, i use it on my weathercase website, try api provider yr.no

-one
source

More articles:


All Articles