getJSON and Geolocation

getJSON and Geolocation
0.0 0

#1

Hi Everyone,

I am currently working on the Local Weather App and I am struggling to the Longitude and Latitude, for some reason the getJSON function is not executed. Here is my code:


var GEOaddress = "http://ip-api.com/json"; 
var latitude = "";
var longitude = ""; 
 
$(document).ready(function() {

 $.getJSON(GEOaddress, function (json) {
   
   latitude = json["lat"];
   longitude = json["long"];
  console.log(latitude)  // command not executed
 });
  
console.log(latitude)  //return "";

});

Does anyone have an idea why getJSON is not executed?

Thanks


#2

Try using https in your url if the api supports it. I’d also add a .fail() function to the end to check out what’s going wrong.


#3

Hi there,

There are a couple of things…firstly your line…‘longitude = json[“long”];’ should be "… json[“lon”].
( It’s up to you but dot notation is easier to read. e.g. json.lon ).

Secondly, remember this is an asynchronous request, so the callback doesn’t happen immediately.
When you console.log(latitude) it is showing the value of latitude before the callback has been executed. Rest assured that the AJAX request is working, but it doesn’t happen instantly.
If you move your console.log inside of the AJAX function you’ll see that it is logging the correct value.


#4

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Do you have a Codepen you can share? I’m reasonably sure what the problem is, but it’s good to confirm.


#5

Thanks everyone for your reply. I start to understand things a little bit better - I didn’t know about the asynchronous request (that why I couldn’t understand what’s going on in my code) and by adding a few more console.log() I can see that in my case the execution of getJSON finishes last…everything start to make sense.

The Codepen I am currently working on is here: http://codepen.io/matami85/pen/YNWReB

I have one more question, let’s say that we have a few asynchronous function (let’s call them A, B, C and D) and we want them to be executed one after each other. An easy way would be to nest everything in each other (i.e. A( B( C( D( ) ) ) ) ) . However, I was wondering if there is a more elegant way to code this problem?


#6

You can nest them, however the outcome might be different than what you might be expecting.
For example…
‘A’ will fire off an AJAX request, then ‘B’, then ‘C’ and finally ‘D’ before ‘A’ even has a response. The responses, however, won’t necessarily arrive back in the same order as the requests were fired (because they happen asynchronously, not one after the other).
If you need them to happen in order, one after the other (for example ‘B’ needs data from 'A’s successful callback, and ‘C’ needs data from 'B’s successful callback etc) then you can chain promises using .then(). This way function ‘B’ will only run when function ‘A’ has completely resolved and so on.

$.getJSON(URL)
         .then(A)
         .then(B)
         .done(C)
         .fail(errorHandling);

function A(data){
     //maniplute data
}

function B(manipulatedData){
      //Do more stuff with data
}

function C(finalPass){
     //write data into DOM
}

function errorHandling(error){
    // window.alert("Sorry, there's been an error")
}

#7

Thanks for your reply - everything is clearer now :slight_smile: