如何访问yahoo weather API条件并预测json对象

时间:2017-01-22 19:22:52

标签: json api

不确定什么是错的,但我没有得到id =“hi”或id =“temp”的值

<p>Weather In: <span id="city"></span>,<span id="state"></span></p>
<p id="state"></p>
<p id="unit"></p>
<p id="hi"></p>
<p id="temp"></p>
<p>Wind Speed: <span id="speed"></span></p>

<script>
    var callbackFunction = function(data) {
    var wind = data.query.results.channel.wind;
    var location = data.query.results.channel.location;
    var units = data.query.results.channel.units;
    var forecast = data.query.results.channel.forecast;
    var condition = data.query.results.channel.item;

    document.getElementById("city").innerHTML = location.city;
    document.getElementById("state").innerHTML = location.region;
    document.getElementById("speed").innerHTML = wind.speed;
    document.getElementById("unit").innerHTML = units.temperature;
    document.getElementById("hi").innerHTML = forecast[0][0];
    document.getElementById("temp").innerHTML = condition.condition.item;
    };
</script>

这些是我试图访问的JSON对象。它们包括雅虎天气api响应。我无法访问forcast数组和温度对象(条件)

<!--Yahoo weather API being accessed/JSON Objects-->
    {
"query": {
"count": 1,
"created": "2017-01-22T16:53:36Z",
"lang": "en-US",
"results": {
"channel": {
"units": {
"distance": "mi",
"pressure": "in",
"speed": "mph",
"temperature": "F"
},
"title": "Yahoo! Weather - Nome, AK, US",
"link":                "http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-2460286/",
"description": "Yahoo! Weather for Nome, AK, US",
"language": "en-us",
"lastBuildDate": "Sun, 22 Jan 2017 07:53 AM AKST",
"ttl": "60",
"location": {
"city": "Nome",
"country": "United States",
"region": " AK"
},
"wind": {
"chill": "-22",
"direction": "23",
"speed": "4"
},
"atmosphere": {
"humidity": "68",
"pressure": "1018.0",
"rising": "0",
"visibility": "16.1"
},
"astronomy": {
"sunrise": "11:15 am",
"sunset": "5:13 pm"
},
"image": {
"title": "Yahoo! Weather",
"width": "142",
"height": "18",
"link": "http://weather.yahoo.com",
"url": "http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif"
},
"item": {
"title": "Conditions for Nome, AK, US at 07:00 AM AKST",
"lat": "64.499474",
"long": "-165.405792",
"link": "http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-2460286/",
"pubDate": "Sun, 22 Jan 2017 07:00 AM AKST",

<!-- how do i access this object????-->
"condition": {
"code": "29",
"date": "Sun, 22 Jan 2017 07:00 AM AKST",
"temp": "-22",
"text": "Partly Cloudy"
},
"forecast": [
{
"code": "30",
"date": "22 Jan 2017",
"day": "Sun",
"high": "-19",
"low": "-23",
"text": "Partly Cloudy"
},
{
"code": "28",
"date": "23 Jan 2017",
"day": "Mon",
"high": "-7",
"low": "-19",
"text": "Mostly Cloudy"
},
{
"code": "26",
"date": "24 Jan 2017",
"day": "Tue",
"high": "4",
"low": "-9",
"text": "Cloudy"
},
{
"code": "26",
"date": "25 Jan 2017",
"day": "Wed",
"high": "21",
"low": "5",
"text": "Cloudy"
},
{
"code": "28",
"date": "26 Jan 2017",
"day": "Thu",
"high": "22",
"low": "19",
"text": "Mostly Cloudy"
},
{
"code": "26",
"date": "27 Jan 2017",
"day": "Fri",
"high": "19",
"low": "18",
"text": "Cloudy"
},
{
"code": "26",
"date": "28 Jan 2017",
"day": "Sat",
"high": "19",
"low": "17",
"text": "Cloudy"
},
{
"code": "28",
"date": "29 Jan 2017",
"day": "Sun",
"high": "17",
"low": "12",
"text": "Mostly Cloudy"
},
{
"code": "28",
"date": "30 Jan 2017",
"day": "Mon",
"high": "20",
"low": "14",
"text": "Mostly Cloudy"
},
{
"code": "28",
"date": "31 Jan 2017",
"day": "Tue",
"high": "23",
"low": "13",
"text": "Mostly Cloudy"
}
],
"description": "<![CDATA[<img        src=\"http://l.yimg.com/a/i/us/we/52/29.gif\"/>\n<BR />\n<b>Current Conditions:</b>\n<BR />Partly Cloudy\n<BR />\n<BR />\n<b>Forecast:</b>\n<BR /> Sun - Partly Cloudy. High: -19Low: -23\n<BR /> Mon - Mostly Cloudy. High: -7Low: -19\n<BR /> Tue - Cloudy. High: 4Low: -9\n<BR /> Wed - Cloudy. High: 21Low: 5\n<BR /> Thu - Mostly Cloudy. High: 22Low: 19\n<BR />\n<BR />\n<a href=\"http://us.rd.yahoo.com/dailynews/rss/weather/Country__Country/*https://weather.yahoo.com/country/state/city-2460286/\">Full Forecast at Yahoo! Weather</a>\n<BR />\n<BR />\n(provided by <a href=\"http://www.weather.com\" >The Weather Channel</a>)\n<BR />\n]]>",
"guid": {
"isPermaLink": "false"
}
}
}
}
}
}

1 个答案:

答案 0 :(得分:0)

如果您的JSON已分配给可变数据,您只需按以下方式访问它们:

data.query.results.channel.item.condition.date // DATE
data.query.results.channel.item.condition.temp // TEMPERATURE
data.query.results.channel.item.condition.text // CONDITIONS

使用您的JSON示例https://jsfiddle.net/uop5qx5L/

,这是一个快速的小提琴

有时它会帮助我确定如何使用在线JSON可视化工具/格式化程序such as this one

来访问我的JSON数据中的嵌套对象