使用JSON提取Weather API數據並追加到li's嗎？

Question

我在弄清楚如何提取OpenWeatherMap API數據並將其附加到我的html中的相應li時遇到了麻煩。 感謝您的幫助，我現在仍受以下代碼的困擾：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Project 21</title>
  <style>
    html {margin:2em; font-size:2em; font-family:Helvetica, Arial, sans-serif;}
    h1 {margin:0 0 0.2em; color:#369;}
    img {float:left; margin-right:1em;}
    ul {float:left; margin:0; padding:0; list-style:none;}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
  <section>
    <h1>Current Weather for </h1>
    <div class="img" id="data-img"></div>
    <ul>
      <li><b>Conditions:</b> <span id="data-current"></span></li>
      <li><b>Temperature:</b> <span id="data-temp"></span>&deg;</li>
      <li><b>Humidity:</b> <span id="data-humidity"></span>%</li>
      <li><b>Wind Speed:</b> <span id="data-wind"></span>mph</li>
    </ul>
  </section>
  <script>
  $.getJSON('http://api.openweathermap.org/data/2.5/weather?callback=?',
  { 'zip': '46556,us', 'units':'imperial' },
    function(data){
      console.log(data);
  })
  .fail(function(jqxhr, textStatus, error) {
    console.log("Request Failed"+ textStatus + "," + error);
  });



  </script>
</body>
</html>

Answer 1

您應該搜索JQuery選擇器，以便處理標簽屬性或文本。 但是，這是您的答案：

$.getJSON('http://api.openweathermap.org/data/2.5/weather?callback=?', { 'zip': '46556,us', 'units': 'imperial' }, function(data){ 
            console.log(data);
            $("#data-current").text(data.weather[0].description);
            $("#data-temp").text(data.main.temp);
            $("#data-humidity").text(data.main.humidity);
            $("#data-wind").text(data.wind.speed);
        })
        .fail(function(jqxhr, textStatus, error) {
        console.log("Request Failed" + textStatus + "," + error);
        });

為了使用與openWeather相關的其他數據，請檢查您在控制台中顯示的數據。

使用JSON提取Weather API數據並追加到li's嗎？

問題描述

1 個解決方案

解決方案1
0 已采納 2015-04-22 23:10:33

使用JSON提取Weather API數據並追加到li&#39;s嗎？

問題描述

1 個解決方案

解決方案1 0 已采納 2015-04-22 23:10:33

使用JSON提取Weather API數據並追加到li's嗎？

解決方案1
0 已采納 2015-04-22 23:10:33