AngularJS Web Application Development Blueprints

Getting your friends' profile pictures and birthdays

As of now, we are only displaying the names of our friends; we now need to display their profile picture and their birthdays (if they have updated it on their Facebook profile) too.

By using the Graph Explorer, you'll see that the endpoint that we need to call to get the required information is /me/friends?fields=birthday,name,picture.

Let's update the endpoint in our directive controller function by adding the following highlighted code. We make this change in the app/directives.js file, shown as follows:

$scope.loadFriends = function() {

  FB.api('/me/friends?fields=birthday,name,picture', function(response) {
    $scope.$apply(function() {
      $scope.myFriends = response.data;
    });

  });
}

We'll also need ...