CODEWITHSUNDEEP
javascripthtmljsonapi
Grimlockz
Grimlockz

Reputation: 2581

OpenWeather API - Pulling JSON data out

I'm writing a little JavaScript to pull information from JSON that contains name, longitude, latitude and openweather API call. What I need is to get the API information out of the API call into the HTML page so you can get the weather forecast for each information. I have the two elements working separately but can't work out how to get them working together.

Help please? :-)

Sample API Weather from d.weather 

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

HTML page for pulling the openweather JSON data

<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 pulling the 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"
  },

Upvotes: 8

Views: 49679

Answers (3)

Luis
Luis

Reputation: 1

I have made a complete example. For me this 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;
}

Upvotes: 0

Sakher
Sakher

Reputation: 31

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

Upvotes: -1

Andy
Andy

Reputation: 63524

I have the basics that should help you on your way. It's a mashup of your two pages.

First I amended your getWeather function to call for the weather rather than the forecast. It accepts a city parameter and appends that parameter to the data before the callback is called.

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, in lieu of your teams JSON I made one up in the form of a JS object, with Arsenal and Liverpool and their corresponding cities as the data. The function loops over the object, extracts the city name and passes it to getWeather. The data is returned and appended 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");
      });
    }

  });
});

Hopefully this will give you a few ideas about how to tackle this project.

See it working here.

Upvotes: 8

Related Questions