我的天气应用程序的网页中没有显示任何数据
Posted
技术标签:
【中文标题】我的天气应用程序的网页中没有显示任何数据【英文标题】：No data is being displayed in the web page for my weather app 【发布时间】：2017-08-29 17:35:49 【问题描述】：所以我最近一直在制作一个天气应用程序。 我测试了我的代码，但没有显示温度、国家和当前天气的描述。我认为问题始于我的 html 地理定位功能。我觉得该功能无法解析天气 api 数据。
我的代码在下面：
$( document ).ready(function()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition);
else
x.innerHTML = "Geolocation is not supported by this browser.";
function showPosition(position)
var lat = "lat= " + position.coords.latitude;
var lon = "lon= " + position.coords.longitude;
getWeather(lat,lon);
function getWeather(lat,lon)
var urlstring = "https://fcc-weather-api.glitch.me/api/current?" + lat + "&" + lon;
$.ajax(
url : urlstring,
dataType : "jsonP",
success : function(data)
var temp = data.main.temp;
var desc = data.weather[0].description;
var country = data.sys.country;
$("#desc").html(desc);
$("#temp").html(temp);
)
var ctof = $("#c/f").click(function()
var cel = Math.round((temp - 32) * 5 / 9);
var faren = Math.round((temp * 9 / 5) + 32);
if(ctof == true)
$("#temp").html(faren);
else
$("#temp").html(cel);
)
);
我什至包含了我的 html 代码，仅供参考
<!DOCTYPE html>
<html>
<head><title>Web App</title></head>
<body>
<div class="container">
<div class="row">
<header class="col-xs-12 text-center">
<h1>Free Code Camp </h1>
<h1>Weather App</h1>
</header>
<div class="col-xs-8 col-xs-offset-2">
<div class="text-center status">
<p><span id="city"></span> <span id="country"></span></p>
<p><span id="temp"><button id="#c/f">C/F</button></span></p>
<p id="desc"></p>
</div>
<div class ="info">
<div class="develop">Developed by = Shumaila Bi Shaikh</div>
<div class="langs">Created by: HTML,CSS,ANGULARJS</div>
</div>
<script src="Weather.js"></script>
【问题讨论】：
这在小提琴中有效。请参阅jsfiddle.net/bokav0z8/1 问题可能出在您的 HTML 结构上。 【参考方案1】：您是否尝试过console.log(desc) 或您的其他数据？我怀疑你得到了你需要的数组，但是你试图将这些数组直接附加到你的 html 中，这是行不通的......
这样的行：
$("#desc").html(desc);
$("#temp").html(temp);
除非您传递像<p>Hello</p> 这样的有效html 字符串，否则这将不起作用，但在这种情况下，您传递的是数组。您需要绘制出您希望数据实际呈现的方式，然后将其传递给您的.html() 调用。
根据您的数据结构，可能如下所示
let descString = "";
desc.forEach(value => descString += "<p>" + value.something + "</p>")
$("#desc").html(descString)
【讨论】：
【参考方案2】：您的问题在这一行：
var ctof = $("#c/f").click(function()
当您需要选择具有在 CSS 表示法中使用的字符的元素时，您需要以 \\ 为前缀对它们进行转义。更多详情请见docs。
因此，你需要写：
var ctof = $("\\#c\\/f").click(function()
第二个问题在这一行：
<p><span id="temp"><button id="#c/f">C/F</button></span></p>
当您获得 data.main.temp 时，您会覆盖并删除该按钮。因此，将行更改为：
<p><span id="temp"></span><button id="#c/f">C/F</button></p>
为了在 Chrome 中启用地理定位，您需要像 answer 中所示那样启用它
fiddle
【讨论】：
以上是关于我的天气应用程序的网页中没有显示任何数据的主要内容，如果未能解决你的问题，请参考以下文章