我的天气应用程序的网页中没有显示任何数据答案

【问题标题】：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 结构上。

标签： javascript json ajax

【解决方案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

【讨论】：