OpenWeather API - 提取 JSON 数据
Posted
技术标签:
【中文标题】OpenWeather API - 提取 JSON 数据【英文标题】：OpenWeather API - Pulling JSON data out 【发布时间】：2013-09-25 22:13:22 【问题描述】：我正在编写一个小 javascript 来从 JSON 中提取包含名称、经度、纬度和 openweather API 调用的信息。我需要的是从 API 调用中获取 API 信息到 html 页面中，这样您就可以获取每个信息的天气预报。我让这两个元素分开工作，但不知道如何让它们一起工作。
请帮忙？ :-)
来自 d.weather 的示例 API 天气
api.openweathermap.org/data/2.5/forecase?lat=50.8609&lon=-0.08014&&units=metric
用于提取 openweather JSON 数据的 HTML 页面
<html>
<head>
<title>Weather</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.min.js" ></script>
<script src="http://code.jquery.com/ui/1.7.0/jquery-ui.js" ></script>
<script>
function getWeather(callback)
var weather = 'http://api.openweathermap.org/data/2.5/forecast?lat=51.5072&lon=0.1275&units=metric';
$.ajax(
dataType: "jsonp",
url: weather,
success: callback
);
// get data:
getWeather(function (data)
console.log('weather data received');
console.log(data.list[0].weather[0].description);
console.log(data.list[0].weather[0].main);
);
getWeather(function (data)
document.write('weather data received');
document.write('<br>');
document.write(data.list[0].weather[0].description);
document.write('<br>');
document.write(data.list[0].weather[0].main);
document.write('<br>');
document.write(data.list[0].main.temp);
document.write('<br>');
document.write(data.list[0].main[0].dt_txt);
document.write('<br>');
);
</script>
</body>
</html>
用于提取 JSON 数据的 HTML 页面
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<!-- Javascript -->
<script type="text/javascript">
function loadUrl(newLocation)
window.location = newLocation;
return false;
</script>
<script type="text/javascript">
$(document).ready(function ()
$("#btn382").click(function()
/* set no cache */
$.ajaxSetup( cache: false );
$.getJSON("weather.json", function(data)
var html = [];
/* loop through array */
$.each(data, function(index, d)
html.push("Team : ", d.Teams, ", ",
"Long : ", d.Long, ", ",
"Lat : ", d.Lat, ", ",
"Weather : ", d.Weather, "<br>");
);
$("#div381").html(html.join('')).css("background-color", "orange");
).error(function(jqXHR, textStatus, errorThrown) /* assign handler */
/* alert(jqXHR.responseText) */
alert("error occurred!");
);
);
);
</script>
<!-- HTML -->
<a name="#ajax-getjson-example"></a>
<div id="example-section38">
<div>Football weather</div>
<div id="div381"></div>
<button id="btn382" type="button">Team location</button>
</div>
天气.json
"Teams":"Wycombe Wanderers",
"Long":-0.800299,
"Lat":51.6306,
"Weather":" api.openweathermap.org/data/2.5/weather?lat=51.6306&lon=-0.800299&mode=html"
,
"Teams":"Livingston",
"Long":-3.52207,
"Lat":55.8864,
"Weather":" api.openweathermap.org/data/2.5/weather?lat=55.8864&lon=-3.52207&mode=html"
,
"Teams":"Brighton and Hove Albion",
"Long":-0.08014,
"Lat":50.8609,
"Weather":" api.openweathermap.org/data/2.5/weather?lat=50.8609&lon=-0.08014&mode=html"
,
【问题讨论】：
你能把这些添加到 jsfiddle 中吗？ 等等，你从哪里得到teams？这不会出现在天气数据中。你的意思是city？
嗨，安迪，团队来自我手动输入该字段的 json 文件
但是这里的某个地方你似乎合并了天气 json 和团队 json，但我看不出这是在哪里发生的。
我有两个 html 在理论上作为单独的页面工作，团队 json 应该是第二个 html 页面中的手动文件，而天气 json 是我相信的 api 数据调用
【参考方案1】：
我有一些基础知识，应该可以帮助你。这是您的两个页面的混搭。
首先，我修改了您的 getWeather 函数以调用天气而不是预报。它接受city 参数，并在调用回调之前将该参数附加到数据中。
function getWeather(city, callback)
var url = 'http://api.openweathermap.org/data/2.5/weather';
$.ajax(
dataType: "jsonp",
url: url,
jsonCallback: 'jsonp',
data: q: city ,
cache: false,
success: function (data)
data.city = city;
callback(data);
);
在这里，我以 JS 对象的形式代替了您的球队 JSON，以阿森纳和利物浦及其对应的城市作为数据。该函数遍历对象，提取城市名称并将其传递给getWeather。数据返回并附加到 div。
$(document).ready(function ()
$("#btn382").click(function ()
var teams =
arsenal: city: 'london' ,
liverpool: city: 'liverpool'
;
for (var team in teams)
var city = teams[team].city;
getWeather(city, function(data)
var html = [];
html.push('<div>')
html.push('City: ', data.city, ', ');
html.push('Lat: ', data.coord.lat, ', ');
html.push('Lon: ', data.coord.lon, ', ');
html.push('Weather: ', data.weather[0].description);
html.push('</div>')
$("#div381").append(html.join('')).css("background-color", "orange");
);
);
);
希望这会给你一些关于如何处理这个项目的想法。
See it working here.
【讨论】：
安迪感谢您的所有帮助，我可以看到您有什么，这是一个很大的帮助 - 我已经添加了 weather.json，这样您就可以看到我正在尝试做什么 如果这是最佳答案，可以点勾吗？ @Grimlockz，我已经用与您添加的团队信息相关的代码更新了小提琴。我还没有更新答案。 太棒了 - 感谢您在这方面的帮助 - 我喜欢 jsfiddle.net 顺便说一句【参考方案2】：你为什么不使用xml而不是json它很容易解析，我在我的网站weathercase中使用它，尝试api提供者yr.no
【讨论】：
因为 JSON 的解析速度要快得多。效率几乎提高了 10 倍。 任何证明 JSON 更快的证据 这里有一个 Python 实验来说明我的陈述：github.com/concolato/data_processing/tree/master/…，由于 Python 是一种基于 C 的语言，我希望在 C/C++、Java 和 php 中得到类似的结果。但是，您可以尝试使用其他语言来确认您是否愿意。【参考方案3】：我已经做了一个完整的例子。对我来说这很有效：
HTML 文件：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<meta charset="utf-8">
<title>jQuery Ajax</title>
<link rel="stylesheet" href="css/ajx-json-styles.css">
<script>
function displayParsedData(data)
/* Working with the 'data' object (not string) here, now we can access the different properties available.*/
text = '<b>Name: </b>' + data.list[0].name + '<br/>';
text += '<b>message: </b>' + data.message + '<br/>';
text += '<b>Current Temperature: </b>' + data.list[0].main.temp + ' F<br/>';
text += '<b>Weather Conditions: </b>' + data.list[0].weather[0].description + '<br/>';
$('#parsed_json').append(text);
</script>
<script>
function test1()
getWeather(function (data)
$("#raw_json").html('<h2>callback</h2><pre>' + JSON.stringify(data, null, 2) + '</pre>');
displayParsedData(data);
);
function getWeather(callback)
var weather = 'http://openweathermap.org/data/2.1/find/city?lat=8.2924495&lon=-62.7373258';
$.ajax(
dataType: "jsonp",
url: weather,
success: callback
);
</script>
<script>
function test2()
$.ajax(
url: 'http://openweathermap.org/data/2.1/find/city?lat=8.2924495&lon=-62.7373258',
type: 'GET',
dataType:"jsonp",
success: function(data)
$("#raw_json").html('<h2>$.ajax</h2><pre>' + JSON.stringify(data, null, 2) + '</pre>');
displayParsedData(data);
,
error: function(jqXHR, textStatus, error)
alert( "error: " + jqXHR.responseText);
);
</script>
<script>
function test3()
$.getJSON('http://openweathermap.org/data/2.1/find/city?lat=8.2924495&lon=-62.7373258&callback=?', function(data)
$("#raw_json").html('<h2>getJSON</h2><pre>' + JSON.stringify(data, null, 2) + '</pre>');
displayParsedData(data);
)
.done(function()
alert( "second success" );
)
.fail(function()
alert( "error" );
);
/*$.getJSON('http://openweathermap.org/data/2.1/find/city?lat=13.3428&lon=-6.2661&cnt=10&callback=?', function(data) console.log(data); );*/
</script>
<script>
$(document).ready(function ()
$("#btn382").click(function()
/* set no cache */
$.ajaxSetup( cache: false );
$.getJSON("weather.json", function(data)
for (var team in data)
var html = [];
html = '<div class="item"><b>Team: </b>' + data[team].Teams + '<br/>';
html += '<b>Lat: </b>' +data[team].Lat + '<br/>';
html += '<b>Lon: </b>' + data[team].Lon + '<br/>';
html += '<b>Weather: </b>' + data[team].Weather + '<br/></div>';
$("#div381").append(html);
)
.error(function(jqXHR, textStatus, errorThrown) /* assign handler */
/* alert(jqXHR.responseText) */
alert("error occurred!");
);
);
);
</script>
</head>
<body>
<div id="example-section38">
<div>Otra fuente</div>
<div id="div381"></div>
<button id="btn382" type="button">Team location</button>
</div>
<div id="raw_json"></div>
<div id="parsed_json"></div>
<button onclick="test1();">callback</button>
<button onclick="test2();">$.ajax</button>
<button onclick="test3();">getJSON</button>
</body>
</html>
weather.json
[
"Teams":"Wycombe Wanderers",
"Lon":-0.800299,
"Lat":51.6306,
"Weather":" api.openweathermap.org/data/2.5/weather?lat=51.6306&lon=-0.800299&mode=html"
,
"Teams":"Livingston",
"Lon":-3.52207,
"Lat":55.8864,
"Weather":" api.openweathermap.org/data/2.5/weather?lat=55.8864&lon=-3.52207&mode=html"
,
"Teams":"Brighton and Hove Albion",
"Lon":-0.08014,
"Lat":50.8609,
"Weather":" api.openweathermap.org/data/2.5/weather?lat=50.8609&lon=-0.08014&mode=html"
]
ajx-json-styles.css
#raw_json
border:1px solid #333;
background-color:#ccc;
padding: 2em;
word-wrap: break-word;
margin-bottom: 2em;
width: 40%;
float: left;
#parsed_json
padding:2em;
border: 1px solid blue;
width: 40%;
float: right;
h2
margin:0;
padding:0;
.item
padding-bottom: 0.25em;
padding-top: 0.25em;
background-color: #E9BB18;
border: 1px solid white;
【讨论】：
以上是关于OpenWeather API - 提取 JSON 数据的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Flutter 中使用 OpenWeather API 的时区属性获取任何城市/国家的当前时间？
从 Watson Assistant 调用 OpenWeather API：“直接 CloudFunctions 调用不成功”