$.getJSON syntax issue

Question

I'm about to rip out my eyes and eat them. I'm trying to pull data from flickr and apparently I have no idea what I'm doing.

This works:

var flickrAPI = "https://api.flickr.com/services/rest/api_key=xxxxx";
$.get(flickrAPI, 
{
method: "flickr.photosets.getList",
format: "json",
user_id: "xxxxx"
}, alert("ok")
);

And I am alerted "ok" However when I try to use function() {} in place of alert()...

var flickrAPI = "https://api.flickr.com/services/rest/api_key=xxxxx";
$.get(flickrAPI, 
{
method: "flickr.photosets.getList",
format: "json",
user_id: "xxxxx"
}, function(data) {alert("ok");}
);

Nothing happens.

Also, if I assign the return value of $.get to a variable, I'm left with the following JSON object:

{"readyState" : "1"}

which is not what I'm looking for. any ideas? It might be worth noting that the html file I'm working with is a local file.

Thanks

• TimWolla: Did you check the request using your developer tools? Probably a same origin issue.
• user3450830: aha! same origin issue it is. I didn't even know that was a thing. thank you so much for steering me in the right direction.
• TimWolla: I just created an answer containing some more information, you might want to check it :)
• jfriend00: Your alert runs ONLY because it is executed immediately BEFORE the flickrAPI call is even sent. You will need to use JSONP to communicate with flickr.

Answer 1

You cannot retrieve data from another host using AJAX because of the same-origin policy.

It may be possible to use jsonp if the other host supports it. It is explained how to use jsonp with jQuery in the jQuery manual. In the specific case of Flickr there is a blogpost explaining how to use jsonp with flickr.

• user3450830: oh awesome. thanks for that link, you are the man! I'm also kind of assuming that running this all from file:/// could be a big part of the issue

Answer 2

Since it is API I asume it has Access-Control-Allow-Origin header, so this should work

$.ajax({
 url: "https://api.flickr.com/services/rest/api_key=xxxxx",
 data: {
 method: "flickr.photosets.getList",
 format: "json",
 user_id: "xxxxx"
 },
 success: function(data) {alert("ok");},
 dataType: "json"
});