How to print the id

Here is the code. This code gets the friends list from facebook. It comes as name and id pair for every friend. I get this using response["data"] and store it in friends. when I print friends, I get what is added below:

First:

if(loggedIn) {
    FB.api("/me/friends",function(response){
        friends = response["data"];
        totalToBeLoaded = friends.length;
      document.getElementById("status").innerHTML=friends;

  });

The output is:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],

Second: If I change the above code this way:

if(loggedIn) {
  FB.api("/me/friends",function(response){
      friends = response["data"];
      totalToBeLoaded = friends.length;
    document.getElementById("status").innerHTML=friends[0].id;
  });

it prints . id at 0 position correctly as

Output:

1243533622(id)

Third: Since there are more ids if I put it in a while-loop and print everything:

if(loggedIn) {
  FB.api("/me/friends",function(response){
    friends = response["data"];
    totalToBeLoaded = friends.length;
    while(i<totalToBeLoaded)
   开发者_Python百科   document.getElementById("status").innerHTML=friends[i].id;
  });

Output :

Nothing is printed.

How do I print all the id's?

Part of the issue is your loop

totalToBeLoaded = friends.length;
while(i<totalToBeLoaded)
  document.getElementById("status").innerHTML=friends[i].id;

The value of i never changes. You may want to rewrite the loop like this:

for( var i=0, j=friends.length; i < j; i++) {
  document.getElementById("status").innerHTML += friends[i].id + '<br />';
}

Notice the += friends[i].id. This is going to append the current id to the status element instead of overwriting the current value each time. That might make it easier to see what's going on.

You need to create some kind of HTML to display them all (currently you are replacing the html every time), and then iterate through the list (currently you are not incrementing the loop counter).

var i, htmlList = "<ul>";
for (i = 0; i < totalToBeLoaded; i++) {
  htmlList += "<li>" + friends[i].id + "</li>";
}
htmlList += "</ul>";
document.getElementById("status").innerHTML = htmlList;