【问题标题】：Javascript and HTML to display temperature and location from Yahoo API用于显示来自 Yahoo API 的温度和位置的 Javascript 和 HTML
【发布时间】：2017-06-23 19:49:32
【问题描述】：

问题

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

背景

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

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

我一直在关注documentation from Yahoo，但没有像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"] );
    })
})

【问题讨论】：

您的示例存在很多问题，例如访问不存在的变量
检查您的控制台并评估数据。此外，您的演示中有一些错误...首先，您的语法不正确。 result.location.["location"] 会抛出解析错误。此外，query 从未定义过。

标签： javascript yahoo-weather-api

【解决方案1】：

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

注意事项：您正在这样做result.location.["location"] 这是无效的。您可以使用 result.location["location"] 或 result.location.location （顺便说一句，您的结果中都没有返回）

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 查询不会返回位置，因为您将其限制为 select item.condition

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

【讨论】：

这有帮助。我感到困惑的部分是位置。根据雅虎文档，查询包括woeid，在这种情况下，圣地亚哥是woeid = 2487889。看起来代码的一部分显示这是forecast%20where%20woeid%20%3D%202487889，所以我猜这座城市必须是硬编码的，但看起来提前使用woeid.rosselliot.co.nz
@JGallardo – 我已经更新了我的答案，以展示如何获取位置（以及更多信息）

【解决方案2】：

这里有几件事：

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

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

【讨论】：

【解决方案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

【讨论】：