个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
26
4
我正在编写一些 JavaScript 以从包含名称、经度、纬度和 openweather API 调用的 JSON 中提取信息。我需要的是将 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"
},
最佳答案
我有一些基础知识可以帮助你。它是您的两个页面的混搭。
首先，我修改了您的 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");
});
}
});
});
希望这会给你一些关于如何处理这个项目的想法。
关于javascript - OpenWeather API - 提取 JSON 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18918195/
26
4
0
我正在做一个业余爱好项目，使用 Ruby、PHP 或 Java 来抓取 ASP.net 网站的内容。例如，如果网站 url“www.myaspnet.com/home.aspx”。我想从 home.a
如果我有这些字符串： mystrings <- c("X2/D2/F4", "X10/D9/F4", "X3/D22/F4",
我有以下数据集 > head(names$SAMPLE_ID) [1] "Bacteria|Proteobacteria|Gammaproteobacteria|Pseudomonadales|Mor
设置: 3个域类A，B和C。A和B在插件中。 C在依赖于此插件的应用程序中。 class A{ B b static mapping = { b fetch: 'joi
我不知道如何提取 XML 文件中的开始标记元素名称。我很接近〜意味着没有错误，我正在获取标签名称，但我正在获取标签名称加上信息。我得到的是: {http://www.publishing.org}au
我有一个字符串 x <- "Name of the Student? Michael Sneider" 我想从中提取“Michael Sneider”。 我用过: str_extract_all(x,
我有一个如下所示的文本文件: [* content I want *] [ more content ] 我想读取该文件并能够提取我想要的内容。我能做的最好的事情如下，但它会返回 [更多内容] 请注意
假设我有一个项目集合 $collection = array( 'item1' => array( 'post' => $post, 'ca
我正在寻找一种过滤文本文件的方法。我有许多文件夹名称，其中包含许多文本文件，文本文件有几个没有人员，每个人员有 10 个群集/组(我在这里只显示了 3 个)。但是每个组/簇可能包含几个原语(我在这里展
我已经编写了一个从某个网页中提取网址的代码，我面临的问题是它不会以网页上相同的方式提取网址，我的意思是如果该网址位于某些网页中法语，它不会按原样提取它。我该如何解决这个问题？ import reque
如何在 C# 中提取 ZipFile？(ZipFile 是包含文件和目录) 最佳答案 为此使用工具。类似于 SharpZip .据我所知 - .NET 不支持开箱即用的 ZIP 文件。 来自 here
我有一个表达: [training_width]:lofmimics 我要提取[]之间的内容，在上面的例子中我要 training_width 我试过以下方法: QRegularExpression
我正在尝试创建一个 Bash 脚本，该脚本将从命令行给出的最后一个参数提取到一个变量中以供其他地方使用。这是我正在处理的脚本: #!/bin/bash # compact - archive and
我正在寻找一个 JavaScript 函数/正则表达式来从 URI 中提取 *.com...(在客户端完成) 它应该适用于以下情况: siphone.com = siphone.com qwr.sip
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this qu
编辑:添加了实际的 JSON 对象和代码以供审查 我有这种格式的 JSON(只是这种层次结构，假设 JSON 正常工作) {u'kind': u'calendar#events', u'default
我已经编写了代码来使用 BeautifulSoup 提取一本书的 url 和标题来自页面。 但它并没有在 > 之间提取惊人的 super 科学故事 1930 年 4 月这本书的名字。和 标签。 如何提
使用 Java，我想提取美元符号 $ 之间的单词。 例如: String = " this is first attribute $color$. this is the second attribu
您好，我正在尝试找到一种方法来确定字符串中的常量，然后提取该常量左侧的一定数量的字符。 例如-我有一个 .txt 文件，在那个文件的某处有数字 00nnn 数字的例子是 00234 00765 ...
php读取zip文件(删除文件,提取文件,增加文件)实例 从zip压缩文件中提取文件 复制代码 代码如下: <?php /* php 从zip压缩文件
我是一名优秀的程序员,十分优秀！