Javascript object properties visible in console, but undefined?

I'm having trouble figuring out how to access object properties in Javascript. I have a function that returns an object, and I can see that object and all of its properties when it is logged to the console in Safari, but I can't get the property values for other functions. For example trying to alert out one of the properties returns 'undefined'.

The function that generates a object

getProfile : function() {

  FB.api('/me', function(response) {
    facebook.profile.user_id = response.id;
    facebook.profile.name = response.name;
    facebook.profile.firstName = response.first_name;
    facebook.profile.lastName = response.last_name;
    facebook.profile开发者_高级运维.gender = response.gender;
  });

  FB.api('/me/photos', {limit: 8}, function(response) {
    facebook.profile.numPhotos = response.data.length;
    for (key in response.data) {
      var photoUrl = response.data[key].source;
      eval('facebook.profile.photo' + key + '= photoUrl');
    }
  });

  return facebook.profile;
}

Trying to use that function in another script

function loadProfile() {
  var profile = facebook.getProfile();


console.log(profile);
  alert(profile.name);
}

The function getProfile invokes FB API function FB.api which executes an asynchoronous HTTP request. In your loadProfile function call you call getProfile which immediately returns facebook.profile object which is not populated with data yet since the HTTP request is not finished yet.

Consider following change:

getProfile : function(fCallback) {
  var bInfo = false,
      bPhotos = false;    

  FB.api('/me', function(response) {
    facebook.profile.user_id = response.id;
    facebook.profile.name = response.name;
    facebook.profile.firstName = response.first_name;
    facebook.profile.lastName = response.last_name;
    facebook.profile.gender = response.gender;

    bInfo = true;
    if (bPhotos)
       fCallback(facebook.profile);
  });

  FB.api('/me/photos', {limit: 8}, function(response) {
    facebook.profile.numPhotos = response.data.length;
    for (key in response.data) {
      var photoUrl = response.data[key].source;
      eval('facebook.profile.photo' + key + '= photoUrl');
    }

    bPhotos = true;
    if (bInfo)
       fCallback(facebook.profile);
  });
}

and call this function the following way now:

function loadProfile() {
  facebook.getProfile(function (profile) {
    alert(profile.name);
  });
}

The reason why ou could see fields in the console is because you introspected the object after the asynch call was successfully executed. The alert call however executed immediately in the same thread on a not yet populated object.

Though 'Sergey Ilinsky' might have considered a right ground, but there are more things, that can be taken into consideration. Usually comes by mistaken, and hard to debug.

Sometime its so happens, that your object-keys contains spaces, let say:

var myObj = new Object();

myObj['key1'] = 'val1';
myObj['key2'] = 'val2';
myObj['key3 '] = 'val3';  //the key contains spaces here
myObj['key4 '] = 'val4';  // the key contains spaces here

so, when you log it to console by console.log(myObj), you will get:

Object { key1="val1", key2="val2", key3 ="val3",  key4 ="val4"}

But when you access:

alert(myObj.key1); //Ok: val1  
alert(myObj.key2); //Ok: val2  

alert(myObj.key3); //undefined  
alert(myObj.key4); //undefined  

alert(myObj['key3']; //undefined  
alert(myObj['key4']; //undefined  

These are the common areas of mistakes, where one mistakenly puts the space, may be while doing copy-paste, and it so happens, that one says, console log is able to show it, but I cannot access it.