Loading JSON values into DIVs with jQuery

Question

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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

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 +')');
    });
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 27, 2010 at 1:14

Reigel Gallarde

65.5k21 gold badges126 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Plasticated Over a year ago

Please forgive my lack of programming skill, but although that demo appears to work (great!), I can't seem to work out how to translate it to my background image code?

Plasticated Over a year ago

Thank you so much. I would never have solved this one without your help. Have a great day! :)

Strelok · Accepted Answer · 2010-07-27 01:14:40Z

0

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.

answered Jul 27, 2010 at 1:14

Strelok

51.7k9 gold badges106 silver badges118 bronze badges

Collectives™ on Stack Overflow

Loading JSON values into DIVs with jQuery

2 Answers 2

demo

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related