title: Facebook api - cannot read property name of undefined
body: <p>Hi I am trying to get the hometown of the person logged into Facebook on my website and eventually create a marker of their location on google maps.</p>
  
  <p>I am getting Uncaught TypeError: Cannot read property 'name' of undefined in my browser console on the line <strong>var city = response.hometown.name;</strong>.</p>
  
  <p>Please help me with this problem, I have tried some solutions posted earlier but will try again as per suggestions. Thanks.</p>
  
  <p>Here is the facebook button in the HTML:</p>
  
  <pre><code>&lt;fb:login-button data-scope="public_profile,email,user_hometown" onlogin="checkLoginState();" autologoutlink="true"&gt;
  &lt;/fb:login-button&gt;
  &lt;div id="status"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>facebook.js file:</p>
  
  <pre><code>// This is called with the results from from FB.getLoginStatus().
  function statusChangeCallback(response) {
  console.log('statusChangeCallback');
  console.log(response);
  // The response object is returned with a status field that lets the
  // app know the current login status of the person.
  // Full docs on the response object can be found in the documentation
  // for FB.getLoginStatus().
  if (response.status === 'connected') {
    // Logged into your app and Facebook.
    testAPI();
  } else if (response.status === 'not_authorized') {
    // The person is logged into Facebook, but not your app.
    document.getElementById('status').innerHTML = 'Please log ' +
      'into this app.';
  } else {
    // The person is not logged into Facebook, so we're not sure if
    // they are logged into this app or not.
    document.getElementById('status').innerHTML = 'Please log ' +
      'into Facebook.';
  }
  }
  
  // This function is called when someone finishes with the Login
  // Button.  See the onlogin handler attached to it in the sample
  // code below.
  function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
      console.log(JSON.stringify(response));
      if (response.status == "connected") {
        // send access token to server
        authToServer(response, function() {
          // after logged in
          // get friends data and add to map
          //addFriendsToMap();
        })
    };
  })//, {scope: 'public_profile,email,user_hometown,user_location'});
  }
  
  window.fbAsyncInit = function() {
  FB.init({
    appId      : '*****************',
    cookie     : true,  // enable cookies to allow the server to access
                        // the session
    xfbml      : true,  // parse social plugins on this page
    version    : 'v2.2', // use version 2.2
    scope      : 'public_profile,email,user_location,user_hometown'
        });
        FB.getLoginStatus(function(response) {
          statusChangeCallback(response);
        });
  };
  
    // Load the SDK asynchronously
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  
    // Here we run a very simple test of the Graph API after login is
    // successful.  See statusChangeCallback() for when this call is made.
    function testAPI() {
      console.log('Welcome!  Fetching your information.... ');
      FB.api('/me', function(response) {
        console.log('Successful login for: ' + response.name);
        console.log(response);
        document.getElementById('status').innerHTML =
          'Thanks for logging in, ' + response.name + '!';
        var city = response.hometown.name;
        alert(city); 
        addFriendsToMap();
      });
    }
  
    function authToServer(authResponse, callback) {
      var authReq = new XMLHttpRequest();
  
      authReq.onreadystatechange = function() {
        if (authReq.readyState==4 &amp;&amp; authReq.status==200) {
          console.log("logged in with server");
          callback();
        }
      }
      authReq.open("POST", "http://localhost:3000/auth", true);
      authReq.setRequestHeader("content-type", "application/json");
      authReq.send(JSON.stringify(authResponse));
    }
  
    function addFriendsToMap() {
  
        var dataURL = "http://localhost:3000/model/data.json";
        var friendsReq = new XMLHttpRequest();
  
        friendsReq.onreadystatechange = function() {
         if (friendsReq.readyState==4 &amp;&amp; friendsReq.status==200) {
           // parse the response friendsReq.responseText as json
           console.log("returned from server facebook request")
           var jsonData = JSON.parse(friendsReq.responseText);
           var friends = jsonData.friends;
           var index = 0;
  
           // for each element in the friends array add a marker
           while (index &lt; friends.length) {
             var friend = friends[index];
             var marker = new google.maps.Marker({
               position: new google.maps.LatLng(
                 friend.lat,
                 friend.lng),
                 title: friend.name,
                 map: map
               });
               index++;
             }
           }
         }
         friendsReq.open("GET", dataURL, true);
         friendsReq.send();
    }
  </code></pre>