Не удается получить объект json

Question

Я пытаюсь получить название города из элемента ввода, а затем получить информацию о погоде, а также информацию о часовом поясе города от API. Однако я не могу получить объект json в этой функции, но он работает вне функции. Может ли кто-нибудь мне помочь?

var d = "Lisbon"; 
 
$(document).ready(function() { 
 
    $("#button").click(function() { 
 
    d = document.getElementById("input").value; 
 
    $(document).ready(function myfunction() { 
 
     $.getJSON('http://api.openweathermap.org/data/2.5/weather?APPID=11d324c05e02e308c1c9eb8d8041b143&q=' + d + '&units=metric', function(data) { 
 
     document.getElementById("city").innerHTML = data.name + ", " + data.sys.country; 
 
     document.getElementById("wind").innerHTML = data.wind.speed + " m/s "; 
 
     document.getElementById("cloudiness").innerHTML = data.weather[0].description; 
 
     document.getElementById("pressure").innerHTML = data.main.pressure + " hpa"; 
 
     document.getElementById("humidity").innerHTML = data.main.humidity + " %"; 
 
     document.getElementById("coord").innerHTML = "[ " + data.coord.lat + ", " + data.coord.lon + " ]"; 
 
     document.getElementById("temperature").innerHTML = data.main.temp + "°C"; 
 
     document.getElementById("icon").innerHTML = "<img src=http://openweathermap.org/img/w/" + data.weather[0].icon + ".png" + ">"; 
 
     console.log(data); 
 
     (function() { 
 
      $.getJSON("http://api.geonames.org/timezoneJSON?" + "lat=" + data.coord.lat + "&" + "lng=" + data.coord.lon + "&username=hrrs", function(data) { 
 
      document.getElementById("time").innerHTML = data.time; 
 
      document.getElementById("timeCity").innerHTML = data.timezoneId; 
 
      document.getElementById("country").innerHTML = data.countryName; 
 
      document.getElementById("sunrise").innerHTML = data.sunrise; 
 
      document.getElementById("sunset").innerHTML = data.sunset; 
 
      console.log(data); 
 
      }); 
 
     })(); 
 
     }); 
 
     document.getElementById("slayt").innerHTML = '<iframe src="http://www.panoramio.com/wapi/template/slideshow.html?tag=' + d + '&amp;width=1920&amp;height=500&amp;" frameborder="0" width="1920" height="500" scrolling="no" marginwidth="0" marginheight="0"></iframe>'; 
 

 
    })(); 
 
    }); 
 
});

Answer 1

Является ли это то, что вы пытаетесь достичь? http://jsfiddle.net/wnunhhac/

<input type="text" id="inputCity" value="Zurich"/> 
<input type="button" id="start" value="Go" /> 
<br /> 
<span id="city">click go</span> 

$(document).ready(function() { 
    $("#start").click(function() { 
     var d = $("#inputCity").val(); 
     $.getJSON('http://api.openweathermap.org/data/2.5/weather?APPID=11d324c05e02e308c1c9eb8d8041b143&q=' + d + '&units=metric', function(data) { 
     $("#city").html(data.name);   
     }); 
    }); 
}); 

API-интерфейс возвращает код состояния 404 не найден, если город является недействительным. Поэтому вы должны закодировать соответствующий ответ.

if (data.cod === "404") { 
    // Api could not find city 
    return; 
} 

Также я изменил тип кнопки на «кнопку» вместо «отправить»

<button type="button" id="button" class="btn btn-default"> 

корреспондент Fiddle: http://jsfiddle.net/xvn6f05w/