json Flickr Api undefined с использованием Javascript

Question

. Привет, я пытаюсь заполнить this tutorial, но они оставили некоторые ключевые части в своих инструкциях. Я выяснил некоторые из недостатков, но я не могу подключить изображения flickr, которые возвращаются API поиска фотографий в качестве фона. Я продолжаю получать ReferenceError: jsonFlickrApi is not defined как консольную ошибку, несмотря на то, что я могу видеть нужные мне данные. Если бы кто-нибудь мог объяснить, что я делаю неправильно, я был бы очень признателен, спасибо!

JS:

document.onreadystatechange = function(){ 
    if(document.readyState === "interactive"){ 
     var weatherData = { 
      city:    document.querySelector("#city"), 
      weather:   document.querySelector("#weather"), 
      temperature:  document.querySelector("#temperature"), 
      temperatureValue: 0, 
      units:    "°F" 
     }; 

     function getLocationAndWeather(){ 
      if (window.XMLHttpRequest){ 
       var xhr = new XMLHttpRequest(); 
       xhr.addEventListener("load", function() { 
        console.log("Processing weather info..."); 
        var response = JSON.parse(xhr.responseText); 

        console.log(response); 
        var position = { 
         latitude: response.latitude, 
         longitude: response.longitude 
        }; 
        var cityName = response.city; 
        if(cityName =="Earth"){ 
         /*IP-based location detection failed.*/ 
         /*Ask user where he or she lives*/ 
         getWeatherForLocation(); 
        } else { 
        var weatherSimpleDescription = response.weather.simple; 
        var weatherDescription   = response.weather.description; 
        var weatherTemperature   = Math.round(response.weather.temperature * 9/5 + 32); 

        weatherData.temperatureValue = weatherTemperature; 

        loadBackground(position.latitude, position.longitude, weatherSimpleDescription); 

        weatherData.city.innerHTML   = cityName; 
        weatherData.weather.innerHTML  = ", " + weatherDescription; 
        weatherData.temperature.innerHTML = weatherTemperature + weatherData.units; 
        console.log("Finished proessing and displaying weather info..."); 

        } 
       }, false); 

       xhr.addEventListener("error", function(err){ 
        alert("Could not complete the request"); 
       }, false); 

       xhr.open("GET", "https://fourtonfish.com/tutorials/weather-web-app/getlocationandweather.php?owapikey=ab2497c49afeabeff924fb4bd2288ee5&units=metric", true); 
       xhr.send(); 
       console.log("Requesting weather info..."); 
      } else { 
       alert("Unable to fetch location and weather data."); 
      } 
     } 

     function getWeatherForLocation(){ 
      var location = prompt("Your location could not be detected automatically, can you tell me where you live?"); 
      if (location != null){ 
       document.querySelector("body").style.backgroundImage = "url('https://fourtonfish.com/tutorials/weather-web-app/images/default.jpg')"; 
       document.querySelector("#image-source").setAttribute("href", "https://www.flickr.com/photos/superfamous/310185523/sizes/o/"); 

       var xhr = new XMLHttpRequest(); 
       xhr.addEventListener("load", function() { 
        var response = JSON.parse(xhr.responseText); 

        console.log(response); 
        var position = { 
         latitude: response.latitude, 
         longitude: response.longitude 
        }; 
        var lat = response.latitude; 
        var lon = response.longitude; 
        var cityName = response.city; 

        var weatherSimpleDescription = response.weather.simple; 
        var weatherDescription = response.weather.description; 
        var weatherTemperature = Math.round(response.weather.temperature); 
        weatherData.temperatureValue = weatherTemperature; 

        weatherData.city.innerHTML = cityName; 
        weatherData.weather.innerHTML = ", " + weatherDescription; 
        weatherData.temperature.innerHTML = weatherTemperature + weatherData.units; 

       }, false); 

       xhr.addEventListener("error", function(err){ 
        alert("Could not complete the request"); 
       }, false); 



       xhr.open("GET", "https://fourtonfish.com/tutorials/weather-web-app/getweatherforlocation.php?owapikey=45713cc0d54c4bfa1c7efbbdbd1c6c2b&units=metric&location=" + location, true); 
       xhr.send(); 
      } 
      else{ 
       alert("Unable to fetch the location and weather data."); 
      }      
     } 

     function loadBackground(lat, lon, weatherTag) { 
      var script_element = document.createElement('script'); 

      script_element.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=0677de6a559772c8cb27dd22219dfa0c&lat=" + lat + "&lon=" + lon + "&accuracy=1&tags=" + weatherTag + "&sort=relevance&extras=url_l&format=json"; 

      document.getElementsByTagName('head')[0].appendChild(script_element); 
     } 

     function jsonFlickrApi(data){ 
       if (data.photos.pages > 0){ 
        var photo = data.photos.photo[0]; 
        console.log("Photo data: " + photo); 
        document.querySelector("weather-web-app").style.backgroundImage = "url('" + photo.url_l + "')"; 
        document.querySelector("#image-source").setAttribute("href", "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id); 
       } 
       else{ 
        document.querySelector("weather-web-app").style.backgroundImage = "url('https://fourtonfish.com/tutorials/weather-web-app/images/default.jpg')"; 
        document.querySelector("#image-source").setAttribute("href", "https://www.flickr.com/photos/superfamous/310185523/sizes/o/"); 
       } 
      } 

      getLocationAndWeather(); 

     } 
} 

Answer 1

Хорошо, понял, что это было.

Flikr не нравится

script_element.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=0677de6a559772c8cb27dd22219dfa0c&lat=" + lat + "&lon=" + lon + "&accuracy=1&tags=" + weatherTag + "&sort=relevance&extras=url_l&format=json"; 

В частности, она не понравилась моя переменная weatherTag.

так

script_element.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=0677de6a559772c8cb27dd22219dfa0c&lat=" + lat + "&lon=" + lon + "&accuracy=1" + + "&sort=relevance&extras=url_l&format=json"; 

вместо работал отлично.

Спасибо!

Answer 2

Во-первых, у вас есть опечатка в этой строке:

script_element.src = "...&accuracy=1" + + &sort=relevance..."; 

Во-вторых, апи Flickr с помощью JSONP, как я вижу, что требует функцию обратного вызова определяется на стороне приемника. Поскольку вы помещаете эту функцию в слушателя и в состояние, это будет неопределенным.

Положите его снаружи:

document.onreadystatechange = function() { 
    ... 
} 
function jsonFlickrApi() {...}