Local weather app

1

Hey, guys, I have just started my weather app, and I am already facing a problem.

$(document).ready(function(){
//var long=0,lat=0;var fetch="http://ip-api.com/json"; $.getJSON("http://ip-api.com/json", function (data) { var long=data.lon; var lat=data.lat; $("#data").html("lat="+lat+"<br>long="+long); }); // $("#data").html("lat="+lat+"<br>long="+long);<-- this is not able to display the longitude and latitude });

The last line of my code (the one that I have commented) cannot display the longitude and latitude. I guess this is happening because once getJSON finishes all the local data is destroyed. Is there anyway i can pass those variables outside the function. Like we use pointers in C or c++ or return the value of the function call. I am really new JS.
Please help me

2

I seriously need hep, please let me know if you guys are nit able to understand my question. Thanks

3

Maybe an asynchronous problem.

Try putting your commented line inside the .getJSON function or make it a function and call it from there.

4

First of all, don’t panic.
Have you checked the error in the console(press ctrl+shift+i) on your web browser?
If the error, is

VM1137 jquery-git.js:9465 Mixed Content: The page at ‘https://jsfiddle.net/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://ip-api.com/json’. This request has been blocked; the content must be served over HTTPS.

or at least contain a phrase “Mixed Content”
Then, you will have to find a service that uses secure HTTP in which the url begins with https://

Nonetheless, when I take the JSON data by my own, the latitude and longitude shows exactly what I wanted.

var data = {"as":"AS4787 PT Cyberindo Aditama","city":"Jakarta","country":"Indonesia","countryCode":"ID","isp":"PT. Cyberindo Aditama","lat":-6.1744,"lon":106.8294,"org":"PT. Cyberindo Aditama","query":"101.128.76.53","region":"JK","regionName":"Jakarta","status":"success","timezone":"Asia/Jakarta","zip":""};
var long=data.lon;
var lat=data.lat;

console.log(long);
console.log(lat);
$("body").html("lat="+lat+"<br>long="+long);
5

Make sure your running this on a local server too. It wont work if your just opening the html file.

6

My code works and displays latitude and longitude but it can only to so inside getJSON, as soon as I want to use the variables in declared inside getJSON outside it, I am unable to get results.

7

$.getJSON() is an asynchronous operation - meaning, the rest of your code will continue to run until the callback is executed. The solution is to place your code which relies on the callback response, inside the callback.

function updateView(data) {
  // continue from here
}

$.getJSON(url, function(data) {
  updateView(data)
})

It’s possible to shorten this a bit when you’re comfortable with the idea that the callback function can be a named function which is passed the response object.

function updateView(data) {
  // continue from here
}

$.getJSON(url, updateView)
2 Likes
8

sweet, got it! Thank man owe you one :slight_smile: