Javascript 和 HTML 显示来自 Yahoo API 的温度和位置

Question

问题

如何使用 Yahoo 天气 API 在像 codepen 这样的网站上构建一个显示位置和温度的最小工作示例。我特别需要加利福尼亚州的圣地亚哥。并且只使用 HTML 和 Javascript，而不是 PHP.

背景

我确实检查了该网站是否有类似的问题，但它只解决了温度 Getting only temperature from Yahoo Weather 但它只是链接到一个代码过多的过于复杂的教程的答案。

网站上的其他答案只有 YML，但没有显示如何集成整个工作示例。

我一直跟着 documentation from Yahoo but there is no working example like how NASA has a live example

代码

我有这个CodePen demo

HTML

<div id="output"></div>

Javascript

$(document).ready(function () {
    $.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20item.condition%20from%20weather.forecast%20where%20woeid%20%3D%202487889&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys/", function (data) {
        console.log(data);
        console.log(query)
        $('#output').append( 'The temperature in' + result.location.["location"] + 'is' + result.condition.["temp"] );
    })
})

Answer 1

这里有几件事：

您正在尝试错误地访问位置和天气数据。你应该使用 data.location 和 data.weather 因为你是将 JSON 作为函数中的数据传递给函数 (data) 部分。
您的 API 呼叫未正常进行。查看此处的文档并尝试再次拨打电话。 https://developer.yahoo.com/weather/

此示例没有任何过多的代码，是一个很好的起点：https://developer.yahoo.com/weather/#get-started

Answer 2

这是一个基于您的原始代码的工作示例。

需要注意的一点：您这样做是无效的。result.location.["location"]您可以使用 result.location["location"] 或 result.location.location（顺便说一下，两者都没有 returned 在您的结果中）

var queryURL = "https://query.yahooapis.com/v1/public/yql?q=select%20item.condition%20from%20weather.forecast%20where%20woeid%20%3D%202487889&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys/";

$.getJSON(queryURL, function (data) {
  
  var results = data.query.results
  var firstResult = results.channel.item.condition
  console.log(firstResult);
  
  var location = 'Unknown' // not returned in response
  var temp = firstResult.temp
  var text = firstResult.text
  
  $('#output').append('The temperature is ' + temp + '. Forecast calls for '+text);
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

更新

您的 API 查询没有 return 位置，因为您将其限制为 select item.condition

将 q=select%20item.condition 更改为 q=select%20* 然后您将获得更多数据 returned，including location.

Answer 3

根据已接受的答案，我进行了一项修改以说明位置。它的 woeid 必须使用 http://woeid.rosselliot.co.nz/ 之类的东西进行查找，然后定义为变量，在我的例子中是圣地亚哥。

结果 Javascript 是

var queryURL = "https://query.yahooapis.com/v1/public/yql?q=select%20item.condition%20from%20weather.forecast%20where%20woeid%20%3D%202487889&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys/";

$.getJSON(queryURL, function (data) {

  var results = data.query.results
  var firstResult = results.channel.item.condition
  console.log(firstResult);

  var location = 'San Diego'
  var temp = firstResult.temp
  var text = firstResult.text

  $('#output').append('The temperature in ' + location + ' is ' + temp + '. Forecast looks '+ text);

})

完整的工作演示在 http://codepen.io/JGallardo/pen/XpBMRX

Javascript 和 HTML 显示来自 Yahoo API 的温度和位置

Javascript and HTML to display temperature and location from Yahoo API

javascript

yahoo-weather-api

问题

背景

代码

HTML

Javascript

更新