Facebook Graph API response javascript

Question

I want to get name and picture of every friend. please tell me how can i handle this. I am getting no row and finding an error "Uncaught TypeError: Cannot set property 'innerHTML' of null"

     FB.api('/me/friends','GET',{"fields":"id,name,email,picture.height(500)"},
   function(response) {
       console.log(response.total_count);
      var result_holder = document.getElementById('result_friends');
    //  var friend_data = response.data.sort();//sort(sortMethod);
      var results = '';
      document.getElementById('friends_data').innerHTML = 'Name :::' + response.name;
      for (var i = 0; i < friend_data.length; i++) {
          console.log(i + results);
            results += '<div><img src="https://graph.facebook.com/' + friend_data[i].id + '/picture">' + friend_data[i].name + '</div>';
      }            
      // and display them at our holder element
      result_holder.innerHTML = '<h2>Result list of your friends:</h2>' + results;});

Answer 1

This line is wrong: document.getElementById('friends_data').innerHTML = 'Name :::' + response.name;

There will be an array in response (response.data), and in that array there will be the friends with their names.

Remove the line and use the for loop like this:

for (var i = 0; i < response.data.length; i++) {
    results += '<div><img src="https://graph.facebook.com/' + response.data[i].id + '/picture">' + response.data[i].name + '</div>';
}

Or, since you already get the picture URL in the response, try this:

for (var i = 0; i < response.data.length; i++) {
    results += '<div><img src="' + response.data[i].picture.data.url + '">' + response.data[i].name + '</div>';
}

Btw, it is better to just debug with console.log(response) at the beginning of the callback, so you can see what exactly is in the response. Just saying.