Flickr API always returning the same data

Question

I have a small weather app. I get the weather data via "POST" request and append it to the document, that works good.

The users can query the weather by City, now I wanted to load an image of that city with a separate jQuery $Ajax() request.

However, I always get the same result.

The app relevant app structure looks like this:

 <input id="getIt" name="cityajax" type="text" class="ghost-input" 
 placeholder="Enter a City" required> // get user input, querying a city
 <button id="submit">Submit</button>

         <span class="humidLogo">Current humidity:</span> <i class="fas fa-temperature-low" ></i>    <span class="apiHumidity"> % </span>


       <div class="FlickResponse"></div> // flickrResposnse gets appended here
   </div>

The CSS is not relevant, so I follow up with the relevant JS function right away:

var destination = $("#getIt").val(); // cache the user input, I am not sure I have to listen for a change event here and then update the state.
var flickerAPI =
  "https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" +
  destination; // the url to get access the api

$.ajax({
  url: flickerAPI,
  dataType: "jsonp", // jsonp
  jsonpCallback: "jsonFlickrFeed", // add this property
  success: function(result, status, xhr) {
    $(".FlickResponse").html(""); // here I want to empty the contents of the target div, but this never happens
    $.each(result.items, function(i, item) {
      $("<img>")
        .attr("src", item.media.m)
        .addClass("oneSizeFitsAll")
        .appendTo(".FlickResponse");
      if (i === 1) {
        return false;
      }
    });
  },
  error: function(xhr, status, error) {
    console.log(xhr);
    $(".FlickResponse").html(
      "Result: " +
        status +
        " " +
        error +
        " " +
        xhr.status +
        " " +
        xhr.statusText
    );
  }
});

That is all. So why do I always get the same response from the API? Do I have to listen to change events on the input field? Because the POSt request work without a change event listener.

Is it because I am querying 2 APIs and I am using the same input field for the value(stupid question, but you never know x).?

Here is a Codepen with the full code, just enter a city and click the submit button:

https://codepen.io/damPop/pen/qLgRvp?editors=1010

Answer 1

I would pull the image retrieval (and weather lookup) into another function as shown below, then you're good!

I've forked to another codepen: updated example

function loadDestinationImage() {
    var destination = ($("#getIt").val());
    var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=" +  destination;
    $.ajax({
        url: flickerAPI,
        dataType: "jsonp", // jsonp
        jsonpCallback: 'jsonFlickrFeed', // add this property
        success: function (result, status, xhr) {
            $(".FlickResponse").html("");
            $.each(result.items, function (i, item) {
                $("<img>").attr("src", item.media.m).addClass("oneSizeFitsAll").appendTo(".FlickResponse");
                if (i === 1) {
                    return false;
                }
            });
        },
        error: function (xhr, status, error) {
                console.log(xhr)
                $(".FlickResponse").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
        }
    });
}

I'd do the same with the weather:

 function loadWeather() {
    var destination = ($("#getIt").val());

    $.post("https://api.openweathermap.org/data/2.5/weather?q=" +
    destination +
    "&units=metric&appid=15c9456e587b8b790a9092494bdec5ff",
    function (result, status, xhr) {

        var APIresponded =  result["main"]["temp"];
        var APIweather =  result["weather"][0]["description"];
        var sunGoing = result["sys"]["sunset"];
        var output = destination.capitalize();
        var humidValue = result["main"]["humidity"];
        var windy = result["wind"]["speed"];
        var windDirection = result["wind"]["deg"];

        if (windDirection <= 90) {
          windDirection = "southwest"
        }
        if (windDirection <= 180) {
          windDirection = "northwest"
        }
        if (windDirection <= 270) {
          windDirection = "northeast"
        }
        if (windDirection <= 360) {
          windDirection = "southeast"
        }
        if (APIweather.includes("snow")) {
          $('#displaySky').addClass('far fa-snowflake');
        }
        if (APIweather.includes("rain")) {
          $('#displaySky').addClass('fas fa-cloud-rain');
        }
        if (APIweather.includes("overcast")) {
          $('#displaySky').addClass('fas fa-smog');
        }
        if (APIweather.includes("sun") || APIweather.includes("clear")) {
          $('#displaySky').addClass('fas fa-sun');
        }
        if (APIweather.includes("scattered")) {
          $('#displaySky').addClass('fas fa-cloud-sun');
        }
        $("#message").html("The temperature in " + output + " is : " + APIresponded + " degrees. The sky looks like this: ");
        $(".apiHumidity").text(humidValue + " %");

        $('.apiWind').html(windy + 'km per hour. The wind direction is  ' + windDirection);
        console.log(APIweather);
    }

    ).fail(function (xhr, status, error) {
        alert("Result: " + status + " " + error + " " +
        xhr.status + " " + xhr.statusText);
    });
}

And call from the submit function:

$("#submit").click(function (e) {   
    loadDestinationImage();
    loadWeather();
});