Issues accessing Flickr API

Question

I'm creating a web app that asks users to input some keywords/tags, queries Flickr API (JSON), then displays a list of photos having these tags. I keep getting the error shown in the photo below and don't get any response from Flickr (empty response).

Does anyone know what's going on here? I think this has to do with the Same-Origin policy.

Below is my script code:

function loadData() {

    var city = $("#city").val();
    var country = $("#country").val();


var  flickrURL = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=cgtrey1a7cea9e78965a42f773f01928&tags=" + country + "," + city + "&format=json&nojsoncallback=1";

    $.getJSON(flickrURL,function(flickrData){

        var photoUrlArray = [];

        for (var i = 0; i < flickrData["photos"]["photo"].length; i++) {
            var photo = flickrData["photos"]["photo"][i];
            var photoId = photo["id"];
            var photoSecret = photo["secret"];
            var photoServer = photo["server"];
            var photoFarm = photo["farm"];

            var url = "https://farm" + photoFarm + ".staticflickr.com/" + photoServer + "/" + photoId + "_" + photoSecret + ".jpg";

            photoUrlArray.push(url);
        };

        for (var i = 0; i < photoUrlArray.length; i++) {
            var img = "<img id=\"flickr-image\" src=\""+ photoUrlArray[i] + "\">";
            $("flickr-conttainer").append(img);
        };

    }).error(function(e){alert(e)});
};

$('#form-container').submit(loadData);

Answer 1

In the flickrURL string you have "format=jsonp" but jsonp is not an available option, you should use "format=json".

Also, your api key seems to be supplied by Flickr's Explore and are valid for one day. You can request a permament API keys in flickr.com.

More info at https://www.flickr.com/groups/api/discuss/72157663968579450/