Show the Local Weather api url with variables

Show the Local Weather api url with variables
0

#1

Hello so my problem is that I have location of user stored in 2 variables latitude and longitude and I need to use this variables in url with another api like this

$.ajax ({ type: 'GET', url: 'http://api.openweathermap.org/data/2.5/weather?lat='+latitude+'&lon='+longitude+'&appid=d7791271d283a1bbf7748756db0dbf5a',
the problem is that it’s not working it ignores variables and it goes with lat and lon 0 … But when I tried to console.log this url it gave me the correct link any ideas ?


#2

Is there a way you can post the full code? Are you using CodePen?


#3

yea of course sorry
http://codepen.io/Sleepy-guy/pen/vKJBYd


#4

What’s happening is known as a race condition, and it’s very common with asynchronous AJAX calls. Since you’re using jQuery, I think the best solution is to use promises and jQuery’s $.when() function. I don’t just want to hand you the answer, so first check out this video by mpjme to get the skinny on promises, then look up $.when() in jQuery’s documentation. As a hint, $.ajax() is already a promise. I promise this will be worth it.

Come back with any other questions you have. Async code will be a big part of your life as a developer, so the sooner you get this, the better off you’ll be.


#5

I guess I should explain what the race condition is, too. Your first AJAX call takes time to complete, but while it’s doing that, the rest of your code continues on. Your openweather AJAX call starts before the googleapi call has completed, leaving latitude and longitude to be empty at the time of the second AJAX call.


#6

Oh so I should first understand callback … :smile:
So update : I now understand a callback but just a little bit I think xD and I made that thing with promises which I understand even less but I’m trying to understand it better. Now my only problem will be transforming Fahrenheit to Celsious and Celsious to Fahrenheit with one button. Anyway thanks @PortableStick .


#7

I don’t know if I should create a new topic because I have a new question but well I will see.
So the problem is now with converting to fahrenheit and celsius. I did something but well it doesn’t work so I would like to know if my code is wrong or it should probably work but there is some mistake.
codepen


#8
$('#transform').on('click',function(){
       var transform =  function (temperature, callback) { 
           function calculate(){
             
           temperature  = temperature / 9/5 - 32 +'C';
           callback(temperature * 9/5 +32 + 'F');
         }
       }  
       transform(temperature, function(temp){
         $('.weather').html(place+ "<br>"+ temperature + "<br>"+ descript+'<br>'+ state);
         temperature = temp;
       })
     });

You don’t need any callbacks here and we can certainly clean this code up a lot. Think of a callback as the code you want to execute when another program has finished working. success in your jQuery AJAX call is a callback. It’s your way of telling the AJAX call, “Hey, when you’re done getting that data from the server I sent you to, run this function for me”. What you’ve done here is really quite clever, but unnecessarily complicated since you can write all the code you need in one function.

One quick note: when you’re doing math in a variable assignment (temperature / 9/5 - 32), don’t concatenate a string at the same time (+ 'C'). The reason is that JavaScript will coerce the whole thing into a string, and instead of getting the answer to a simple math problem, you’ll get a number much larger than you expected! This isn’t your fault, it’s JavaScript’s. + should never have been used for strings and has caused much havoc for developers.

For your temperature issue, here’s what I would advise:

  1. Wrap each part of your weather report in a separate tag with its own class instead of just a single div with a class of weather.
  2. Use two classes, far and cel to keep track of what system your temperature is currently in
  3. Use a simple if/else clause in your button’s click handler to switch from one to the other.

This can be way simpler

$('#transform').on('click',function(){
       
   if($('.temp').hasClass('far')) {
     //switch to celsius
   } else if($('.temp').hasClass('cel')) {
     //switch to farenheit
   }
 });

#9

Oh god thank you… I did it … Well it’s not finished yet because I don’t have icons but that convert is now working fine … I had also some problem in convert formula but now it’s all okay and it’s working. My problem with things like this is that I had no idea that .hasClass() existed and so I’m always finding solution without it.