No data is being displayed in the web page for my weather app

Question

So I have been making a weather app recently . I tested my code and the tempreture and the country and the decription of the current weather are not being displayed . I think the problem begins after my html geolocation function. I feel the function is somehow unable to parse through the weather api data.

My code is here down below :

$( 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);
      }
        }) 
  });

I have even included my html code just for reference sake

<!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>

This works in the fiddle. See https://jsfiddle.net/bokav0z8/1/ The problem might be your HTML structure. — Luka, Aug 29 '17 at 17:48

score 0 · Answer 1 · answered Aug 29 '17 at 17:45

Did you try console.log(desc) or your other pieces of data? I suspect you're getting the arrays that you need, but you're trying to directly append these arrays into your html, which will not work...

Lines like this:

    $("#desc").html(desc);
    $("#temp").html(temp);

This will not work unless you're passing valid html strings like <p>Hello</p> but in this case, you're passing arrays. You need to map out how you want your data to actually be presented, and then pass it into your .html() calls.

Based on your data structure, that could look like this

let descString = "";
desc.forEach(value => descString += "<p>" + value.something + "</p>")
$("#desc").html(descString)

gaetanoM · Answer 2 · 2017-08-29T18:19:34.143

Your issue is in this line:

var ctof = $("#c/f").click(function() {

When you need to select an element having characters used in CSS notation you need to escape them prefixing a \\. For more details see docs.

Hence, you need to write:

var ctof = $("\\#c\\/f").click(function(){

A second issue is in this line:

<p><span id="temp"><button id="#c/f">C/F</button></span></p>

When you get the data.main.temp you overwrite and so remove the button. Therefore, change the line to:

<p><span id="temp"></span><button id="#c/f">C/F</button></p>

In order to enable geolocation in Chrome you need to enable it like shown in this answer

The fiddle

No data is being displayed in the web page for my weather app

2 Answers2