Question

My end goal is for my site to be able to use Facebook API to print a user’s (alphabetized) FB friends out on the screen (I have already done this much) and then have it so they can click on a printed name so that it then stores it on a list on MY website (‘Favorite Facebook friends’, for example).

In summary, I already made it so it prints out their friends alphabetically, so from here I need my website to be able to store the names they click/choose from the list to be used at another time.

Here is what I have so far:

function populateFriendList(session){
  FB.api('/me/friends', {fields: 'name', offset : 0, limit :5000 }, function(response) {  
    for (var i=0, l=response.data.length; i<l; i++){
      var friend = response.data[i];
      FbFriends[i]=friend.name
    }

    document.getElementById('myFriendList').innerHTML = FbFriends.sort().join('<br>'); 
    FB.XFBML.parse(document.getElementById('myFriendList'));
  });     
};

I will be forever grateful to anyone who helps me with this!

Answer 1

You have created code that returns data. If you want to resend ( ie serve ) that data to another user then you need to store that data on the server side.

So you need two things :

1.) Server side code to receive the data that your existing JS code has generated

2.)A location for that data to exist. This could be files written by your server side code or a database.

So you might do something like this

1.) get your user list

2.) using Ajax send that list to server side code

3.) server side code stores that information in a data base

4.) when needed the server side code retrieves the list and formats for whatever your next use is

I think this site would be a good place for you to start learning about this Tizag Ajax Tutorial

You can find examples for how to transform JS arrays or list to UI here Example 1 and here Example 2

you could then send the result of those selections to your server