OpenWeather API - 将JSON数据拉出

时间：2022-06-18 09:48:10

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.

我正在编写一些JavaScript来从JSON中提取包含名称，经度，纬度和openweather API调用的信息。我需要的是将API信息从API调用中获取到HTML页面中，以便您可以获取每个信息的天气预报。我有两个元素分开工作，但无法弄清楚如何让它们一起工作。

Help please? :-)

请帮助？ :-)

Sample API Weather from d.weather

来自d.weather的API天气预报

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

HTML page for pulling the openweather JSON data

用于提取openweather JSON数据的HTML页面

<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

用于提取JSON数据的Html页面

<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

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

3 个解决方案

#1

5  

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.

首先，我修改了你的getWeather函数来调用天气而不是预测。它接受city参数，并在调用回调之前将该参数附加到数据。

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.

在这里，代替你的团队JSON，我以JS对象的形式创建了一个，阿森纳和利物浦及其相应的城市作为数据。函数循环遍历对象，提取城市名称并将其传递给getWeather。返回数据并将其附加到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.

看到它在这里工作。

#2

0  

I have made a complete example. For me this worked:

我已经做了一个完整的例子。对我来说，这工作：

HTML file:

HTML文件：

    <!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

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

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;
}

#3

-1  

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

你为什么不使用xml代替json它很容易解析，我在我的网站weathercase中使用它，试试api提供者yr.no

#1

5  

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.

首先，我修改了你的getWeather函数来调用天气而不是预测。它接受city参数，并在调用回调之前将该参数附加到数据。

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.

在这里，代替你的团队JSON，我以JS对象的形式创建了一个，阿森纳和利物浦及其相应的城市作为数据。函数循环遍历对象，提取城市名称并将其传递给getWeather。返回数据并将其附加到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.

看到它在这里工作。

#2

0  

I have made a complete example. For me this worked:

我已经做了一个完整的例子。对我来说，这工作：

HTML file:

HTML文件：

    <!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

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

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;
}

#3

-1  

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

你为什么不使用xml代替json它很容易解析，我在我的网站weathercase中使用它，试试api提供者yr.no

标签：

相关文章