Question

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

请帮忙吗？ :-)

来自d.weather的样本API天气

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

用于提取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>

用于提取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

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

Answer 1

我有基本的知识可以帮助你。它是你两页的混搭。

首先，我修改了您的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);
    }
  });
}

在这里，代替你的团队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");
      });
    }

  });
});

希望这会给你一些关于如何解决这个项目的想法。

See it working here.

Answer 2

我已经做了一个完整的例子。对我来说这很有效：

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

    [
    {
      "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;
}

Answer 3

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

OpenWeather API - 将JSON数据拉出

3 个答案: