"Uncaught TypeError: Cannot read property 'people' of undefined "

Question

I am trying to use the Plus API to sign a user in. I get the following error in the console:

Uncaught TypeError: Cannot read property 'people' of undefined

This is my logic for loading and getting profile info:

var firstName;
$(document).ready(function () {
  function loadGApi() {
    gapi.client.load('plus', 'v1');
  }
  $('#loaderror').hide();
});

function signInCallback(authResult) {
  if (authResult['status']['signed_in']) {
    // Update the app to reflect a signed in user
    // Hide the sign-in button now that the user is authorized, for example:
    $('#gConnect').hide();
    $('#authOps').show('slow');
    $('#profile').append(
      $('<p>Hello ' + getProfile(firstName) + '</p>'));
    console.log(authResult);

  } else {
    // Update the app to reflect a signed out user
    // Possible error values:
    //   "user_signed_out" - User is signed-out
    //   "access_denied" - User denied access to your app
    //   "immediate_failed" - Could not automatically log in the user
    console.log('Sign-in state: ' + authResult['error']);
  }
}

function getProfile(profile) {
  var request = gapi.client.plus.people.get({
    'userId': 'me'
  });
  if (profile == firstName) {
    request.execute(function (gprofile) {
      return gprofile.displayName;
    });
  }
}

and this is how I am loading the script:

(function() {
  var po = document.createElement('script');
  po.type = 'text/javascript'; po.async = true;
  po.src = 'https://plus.google.com/js/client:plusone.js?onload=loadGApi';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
})();

I apologize if this is an noob question but I hope learn more about Javascript and using the G+ API!

Answer 1

Everything works, your inject asynchronously the Google+ javascript client. When this is donem it calls

gapi.client.load('plus', 'v1');

but gapi.client.load takes 3 parameters, the 3rd one being the callback called when the Google+ API is loaded.

Since you didn't specify a callback, nothing is done.

See the samples, they define the makeRequest callback:

gapi.client.load('urlshortener', 'v1', makeRequest);

and

function makeRequest() {
  var request = gapi.client.urlshortener.url.get({
    'shortUrl': 'http://www.google.com/'
  });
  request.execute(function(response) {
    appendResults(response.longUrl);
  });
}

So you want to do something like:

gapi.client.load('plus', 'v1', onGapiLoaded);

and

function onGapiLoaded() {
  // now you can request Google+ api
}

More specifically the Google+ API samples give an example of what you can have in the onGapiLoaded callback:

// Returns a request object which can be executed (as below) or batched
var request = gapi.client.METHOD_NAME(PARAMETERS_OBJECT);
request.execute(callback);

Example: you can send a search request to the Google+ API using the following method:

var request = gapi.client.plus.activities.search({'query': 'Google+', 'orderBy': 'best'});
request.execute(function(resp) { console.log(resp); });