because if you do not have errors, the console does not show anything with this JSON query in the html

0
$(document).ready(function(){
    var latit;
    var long;
    var kTemp;

  var ip = 'http://ip-api.com/json';
      $.getJSON(ip, function(data){
       latit = data.lat;
       long = data.lon;
       });

  //create API with geolocation
        var api = 'http://api.openweathermap.org/data/2.5/weather?lat=' + latit + '&lon='+ long + '&appid=XXXXxxxxxXXXXxXXXXXXxxx';
    $.getJSON(api, function(data){
  //JSon call for OpenWather API 
    var weatherType = data.weather[0].description;
      kTemp = data.main.temp;
      var winSpeed = data.wind.speed;
      var city = data.name;

      console.log(city);
      console.log(api);
      $("#city").html(city);
      $("#weatherType").html(weatherType);
      $("#winSpeed").html(winSpeed);
      $("#kTemp").html(kTemp);
});

});
    
asked by ecanro 31.05.2017 в 21:32
source

2 answers

0

You have to move the second getJSON inside the result of the first one. JSON is asnychronous. You are calling the second before popular variables

$(document).ready(function(){
    var latit;
    var long;
    var kTemp;

    var ip = 'http://ip-api.com/json';
    $.getJSON(ip, function(data){
       latit = data.lat;
       long = data.lon;

        //create API with geolocation
        var api = 'http://api.openweathermap.org/data/2.5/weather?lat=' + latit + '&lon='+ long + '&appid=XXXXxxxxxXXXXxXXXXXXxxx';
        $.getJSON(api, function(data){
            //JSon call for OpenWather API 
            var weatherType = data.weather[0].description;
            kTemp = data.main.temp;
            var winSpeed = data.wind.speed;
            var city = data.name;

            console.log(city);
            console.log(api);
            $("#city").html(city);
            $("#weatherType").html(weatherType);
            $("#winSpeed").html(winSpeed);
            $("#kTemp").html(kTemp);
        });

    });

});
    
answered by 31.05.2017 в 22:36
0

Calls are asynchronous and each call has to be chained one after the other. That is, you have to wait for your server request to be downloaded, otherwise your variables will not have anything assigned. Imagine that you want to withdraw money from your savings account and for that you go to the bank and forget your debit card, the bank can not solve your money request because you do not have the card, call home to get the happy card and when you have it, the bank takes care of you. And you should consider separating your code. Sun Tzu already said it in the art of war

  

divide and conquer

$(function(){
    var lat, lng, kTemp;
    var ip = 'http://ip-api.com/json';
    $.getJSON(ip, function(data){
        getWeather(data);
    });


    function getWeather(data){
        lat = data.lat;
        lng = data.lon;

        var api = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon='+ lng + '&appid=XXXXxxxxxXXXXxXXXXXXxxx';

        $.getJSON(api, function(dataFromAPI){
            createView(dataFromAPI);
        });
    }

    function createView(dataFromAPI){
        var weatherType = dataFromAPI.weather[0].description;
        var winSpeed = dataFromAPI.wind.speed;
        var city = dataFromAPI.name;
        kTemp = dataFromAPI.main.temp;
        console.log(city);
        console.log(api);
        $("#city").html(city);
        $("#weatherType").html(weatherType);
        $("#winSpeed").html(winSpeed);
        $("#kTemp").html(kTemp);
    }
});
    
answered by 31.05.2017 в 23:56