how to retrieve and display photos from facebook using javascript?

Question

I am trying to retrieve the images from facebook through its javascript API but i am not getting at all where is the actual problem in code.

Help would be really appreciated :) Thanks in Advance.

function testAPI() {
             console.log('Welcome!  Fetching your information.... ');
             FB.api('/me', function (response) {

                 console.log('Successful login for: ' + response.name);
                 document.getElementById('status').innerHTML =
                   'Thanks for logging in, ' + response.name + '!';


                 FB.api('/me/albums', function (response) {
                     for (var i = 0; i < response.data.length; i++) {
                         var album = response.data[i];

                             FB.api('/me/' + album.id + '/photos', function (photos) {
                                 if (photos && photos.data && photos.data.length) {
                                     for (var j = 0; j < photos.data.length; j++) {
                                         var photo = photos.data[j];
                                         // photo.picture contain the link to picture
                                         var image = document.createElement('img');
                                         image.src = photo.picture;

                                         document.body.appendChild(image);

                                     }
                                 }
                             });


                     }
                 });

             });
         }

Answer 1

FB.api('/me/' + album.id + '/photos', function (photos)

This is where you are making a mistake, it should be

FB.api(album.id + '/photos', function (photos)

Also make sure you have proper permissions, you would need user access token with user_photos permission.