Weather App-problem returning values from functions

Weather App-problem returning values from functions
0

#1

Getting the data from the weather API, inserting the values, including the correct C or F unit into the web page was the easy bit. Now I am having difficulty knowing how to get the temperature data out of the function and using it in an event handler. I got a version of the app working–without the conversion button, but the code was messy.

I have included the js to where it started to become “messy”. My question is "How do I pass the temperature value into another function so it can be bound to an event handler?

Here is my (truncated) code. Thank you!


#2

A simple approach would be to have a global variable which contains the original temperature received from the API (in your case celsius) and another global variable which contains the original unit received from the API (let’s call it curentUnit. Then, whenever the button is clicked, you either use celsius or convert it, based on the currentUnit variable You will also need to make sure you change the currentUnit after each click to reflect what the new currentUnit is.


#3

Thank you! Sometimes I cant see the tress for the forest. I can see success not far away now.

. So now I have the conversion button working with the event button. One thing that confuses me though with global variables, I get a reference error if I try to see the value assigned to global vars (console.log), after they have been changed within a function–e.g. myLat, myLng.

BUT adding in the geolocator coords is now causing me some difficulty. (I thought this would be easy!) I appear to be building the correct URL, but the response to the Get request is coming back with a 404 error.

I had problems with the lat and lon vars being assigned values after the API request–so I placed the API request/send/respond in a new function. I think it’s another scope issue.

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

var currentUnits = "C";
var currentTemp = "";
var myLat = "";
var myLng = "";


/////// determine your lat and lon coords ////////////
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    myLat = "lat=" + position.coords.latitude; //global var
    myLng = "lon=" + position.coords.longitude; //global var
    getWeather(myLat, myLng);
  });
} else {
  console.log("Geolocation is not supported by this browser.");
} //END geolocation


////////////// request the weather API/////////////////
function getWeather(myLat, myLng) {
  var requestURL = "'" + api + myLng + "&" + myLat + "'";
  var request = new XMLHttpRequest();
  console.log(requestURL); ** ** ** ** ** //URL looks correct here

  request.open('GET', requestURL); ** ** * ///////////////getting a 404 error
  request.responseType = 'json';
  request.send();

  request.onload = function() {
    var allWeather = request.response;
    console.log(allWeather); ** ** ** ** ////////////////////failed to get the json object
    currentTemp = allWeather.main.temp; //global var
    myWeather(allWeather);
    weatherIcon(allWeather);
    myCountryUnit(allWeather);
  } // END request onload

} //END getWeather

#4

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

The codepen you linked here does not contain your latest code above, so I can not see what the other functions (like myWeather, weatherIcon, or myCountryUnit) are doing, but you are not getting a valid location, because you have your myLat and myLng reverse when calling the API.

You have:

function getWeather(myLat, myLng) {
  var requestURL = "'" + api + myLng + "&" + myLat + "'";

and it should be:

function getWeather(myLat, myLng) {
  var requestURL = "'" + api + myLat + "&" + myLng + "'";

#5

Thanks Randell. After much angst I discovered the additional Quotations were the problem with the construct URL.

function getWeather(myLat, myLng) {
  var requestURL = "'" + api + myLat + "&" + myLng + "'";

should have been:

function getWeather(myLat, myLng) {
  var requestURL =  api + myLat + "&" + myLng ;

The script functions now! So all I have to do is make it look good…

Again, thank you for your patience and taking the time to help me. I wish you a happy Christmas and New Year.


#6

Glad you figured out the quote issue. I saw it later, but forgot to go back in and edit my response. You probably learned more figuring it yourself anyway.


#7

Yes. After earnestly looking at typeof and reading about data types; I searched google for " URL gets a %27 added?" All about being an inexperienced learner. I think I will need a “breather” before tackling the next challenge.