用于显示Yahoo API

Question

问题

如何在像使用Yahoo weather 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"] );
    })
})

Answer 1

以下是基于原始代码的工作示例。

需要注意的事项：你这样做result.location.["location"]这是无效的。您可以使用result.location["location"]或result.location.location（两者都不会在您的结果中返回btw）

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。

Answer 2

这里有几件事：

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

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

Answer 3

根据接受的答案，我做了一个修改以说明位置。必须使用类似http://woeid.rosselliot.co.nz/的内容查找woeid，然后将其定义为变量，在我的情况下，它是圣地亚哥。

生成的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