Weather API ( how do I pass data from function to function)

1

  • My problem is that my html is not being updated.

  • Also the “lat” and “lon” is being appended to the api string.

When I call console.log(api); inside getServerData(lat,lon)

  api + "lat=" + lat + "&lon=" + lon;
  console.log(api);

Console:

"https://fcc-weather-api.glitch.me/api/current?";

Primarily I’m trying to

  • Divide all my functions to do one singular task
  • Remove global variables
  • I’m trying to keep my code clean, especially the (document).ready 
$(document).ready(function() {
});

Below is the code

JavaScript:

$(document).ready(function(){
  getCurrentLocation();
  //getServerData();
});

function getServerData(lat,lon){
  let api = "https://fcc-weather-api.glitch.me/api/current?";
  api + "lat=" + lat + "&lon=" + lon;
  console.log(api);
  $.getJSON(api, function(serverResponse){
    $("#location").html(serverResponse.name + ", " + serverResponse.sys.country);
    $("#weatherIcon").attr("src",serverResponse.weather[0].icon);
    $("#main").html(serverResponse.weather[0].main);
    $("#description").html(serverResponse.weather[0].description);
    $("#country").html(serverResponse.sys.country);
    $("#temp").html(serverResponse.main.temp);    
  });
}


function getCurrentLocation(){
  let lat,lon;
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      lat = position.coords.latitude;
      lon = position.coords.longitude;
      getServerData(lat,lon);
    });
  }//if
}//getCurrentLocation

html:

<div class="container">
  <p id="data"></p>
  <p id="location"></p>
  <span id="temp"></span><a href="">'C</a>
  <p id="main"></p>
  <img id="weatherIcon" src="" alt="">
</div>
2

Should be
api = api + "lat=" + lat + "&lon=" + lon;

  • Strings are immutable
1 Like
3

THANK YOU @JohnnyBizzel I’ve been losing my mind for the past hour !!!

Thank you so much !!!

1 Like
4

Hey thank you for your help , I ran into another problem in regard to toggling between the temperatures ( C and F ).

Can you tell me what to do because It’s stumping me,

5

I would keep the Unit type separate otherwise you will get loads of problems.
The currentTemp var includes a letter so it can’t be converted.

Try something like this to remove the letter or better keep the unit (C or F) in a separate var
currentTemp.substring(0, currentTemp.length-1));

6

Thanks John !!! your help is greatly appreciated. :+1::+1::+1:
I should really just try to keep things as simple as possible.
besides append stings to integers :sob:

Last problem I swear !!!

But now the temperature keeps incrementing because I’m getting the current value from #temp within the DOM :sob::sob:
every time the user toggles the temperature.

I was thinking about assigning the initially returned temp from the server to a global constant variable called originalTemp, so when the user presses the toggle button, the Celsius value that is returned is from the global constant.

Is that a professional way to do things, is there a simpler way ?

7

@JohnnyBizzel I solved it in a basic way, but is there a more professional/logical way it can be improved ?

8

Basic way is fine. It works now. :+1: