JavaScript 和 HTML 从 Yahoo API 显示温度和位置

Question

问题

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

Answer 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 。