[英]How can I get a specific data from an OpenWeatherMap API?
我目前正在为我的学校作业创建一个网站(VWO 的期末论文,这是荷兰中学的最后一年),在那里我有一个侧边栏,由于我得到的 API,它应该给我当前的温度来自打开天气地图。
但是在搜索了几个小时之后,我仍然不知道我应该怎么做。
在过去的几天里我刚刚“学习”了 HTML 和 CSS,所以我对它们的了解仍然是最低限度的,而且我已经正确理解了它,我需要 JavaScript 来解决这个问题,但我仍然不完全理解。
我目前在我的.html
中有这段代码,我想显示从 OpenWeatherMap API 获取的当前温度,而不是 6 度:
<a href="#" style="float:right;">Outside Temp: 6℃</a>
(它是一个没有目的地的链接的原因是因为它在带有引导程序的“侧边栏”中看起来更好)
但我不知道如何将 6℃ 更改为 276.01 开尔文,这是我从我的 API JSON 网站获得的数字:
{"coord":{"lon":5.39,"lat":51.5},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04n"}],"base":"stations","main":{"temp":276.01,"pressure":1008,"humidity":69,"temp_min":275.15,"temp_max":277.15},"visibility":10000,"wind":{"speed":5.1,"deg":70},"clouds":{"all":90},"dt":1542749460,"sys":{"type":1,"id":5208,"message":0.0034,"country":"NL","sunrise":1542697565,"sunset":1542728514},"id":2759040,"name":"Best","cod":200}
因此,我一直在网上和 w3schools 中浏览和搜索,并尝试根据 w3schools 使用以下脚本从 API 获取数据:
function loadDoc() {
var openweathermapapi = new XMLHttpRequest();
openweathermapapi.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var temperature = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = this.responseText;
}
};
openweathermapapi.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=Best&APPID=9c0299218db10c8423221d49842d8488", true);
openweathermapapi.send();
}
按下运行 loadDoc 脚本的按钮后,我得到了完整的网站,但我只想要“main”变量中的“temp”部分,不知道如何获取它。
这是获取当前位置的天气详细信息的示例
首先使用此获取您当前系统的位置
var getIP = 'http://ip-api.com/json/';
然后,它会以 json 格式返回您所在位置的详细信息
此代码获取位置的全部数据并将其设置为您的标签
var weatherjson = "";
var getIP = 'http://ip-api.com/json/';
var openWeatherMap = 'http://api.openweathermap.org/data/2.5/weather'
$.getJSON(getIP).done(function(location) {
$.getJSON(openWeatherMap, {
lat: location.lat,
lon: location.lon,
units: 'metric',
APPID: 'APIKEY'
}).done(function(weather) {
//set temperature from json to your <a> tag
$('#mytemp').text(weather.main.temp);
})
})
上述代码的解释:-
返回的样本 json
{
"coord": {
"lon": -122.08,
"lat": 37.39
},
"weather": [
{
"id": 721,
"main": "Haze",
"description": "haze",
"icon": "50n"
},
{
"id": 711,
"main": "Smoke",
"description": "smoke",
"icon": "50n"
}
],
"base": "stations",
"main": {
"temp": 11.84,
"pressure": 1016,
"humidity": 81,
"temp_min": 10,
"temp_max": 13.3
},
"visibility": 11265,
"wind": {
"speed": 1.13,
"deg": 128.002
},
"clouds": {
"all": 90
},
"dt": 1542782400,
"sys": {
"type": 1,
"id": 471,
"message": 0.003,
"country": "US",
"sunrise": 1542812064,
"sunset": 1542848035
},
"id": 420006353,
"name": "Mountain View",
"cod": 200
}
主列包含您自己的位置的度数(TEMP)
"main": {
"temp": 11.84,
"pressure": 1016,
"humidity": 81,
"temp_min": 10,
"temp_max": 13.3
},
现在我们需要在显示级别显示温度
<a href="#" id="mytemp" style="float:right;">Outside Temp: 6℃</a>
为您的温度提供一个身份,其中包含名为 ID 的锚标签,即“mytemp”
现在找到 ID 并更新温度
//set temperature from json to your <a> tag
$('#mytemp').text(weather.main.temp);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.