Loading JSON values into DIVs with jQuery

Question

Hi there.

I am trying to load images from the Facebook graph api into a div on my website.

I have a div for each of the albums on my facebook page, each has the url id in the rel value. I am trying to loop through the graph api urls and load the first image in each json datablock using the code below:

$('.thumbnail').each(function(index) {
    $.getJSON('http://graph.facebook.com/'+ $(this).attr('rel') +'/photos', function(data) {
       $(this).css('background-image', 'url('+ data.data[0].picture +')');
    });
});

You can see an example of the json here: http://graph.facebook.com/422882642272/photos

I am just trying to traverse the json and load the 'picture' value from the first node.

Answer 1

demo

you missed the callback=? in the url...

$('.thumbnail').each(function(index) {
    var $this = $(this); // should save a reference of the current element...
    $.getJSON('http://graph.facebook.com/'+ $(this).attr('rel') +'/photos/?callback=?', function(data) {
       $this.css('background-image', 'url('+ data.data[0].picture +')');
    });
});​

Answer 2

Here is the short answer: You just cannot do that, due to same origina policy.

Long answer: Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

But I think the facebook API supports the JSONP callback with ?callback=xxx.