Cannot read property 'events' of undefined (Google calendar API)

Question

Most of the time code runs fine but sometimes I get this error: Uncaught TypeError: Cannot read property 'events' of undefined at listUpcomingEvents ((index):110)

Here is my code:

function listUpcomingEvents() {
    var request = gapi.client.calendar.events.list({ //Here's where the error comes from ((index):110)
      'calendarId': 'XXXX',
      'timeMin': (new Date()).toISOString(),
      'showDeleted': false,
      'singleEvents': true,
      'maxResults': 5,
      'orderBy': 'startTime',
      'timeMax':(new Date(tomorrow)).toISOString(),
    });


    request.execute(function(resp) {
      var events = resp.items;
      FsalA('');


      if (events.length > 0) {
        for (i = 0; i < events.length; i++) {
          var event = events[i];
          var when = event.start.dateTime;
          if (!when) {
            when = event.start.date;
          }
          var when2 = event.end.dateTime;
          if (!when2) {
            when2 = event.end.date;
          }

                      if(!event.summary) { 
          event.summary = 'Opptatt'
          }

        var d = new Date(when);
                var time = d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', hour12: false});
            var d = new Date(when2);
                var time2 = d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', hour12: false});
        var startTime = time.replace('.', ':')
        var endTime = time2.replace('.', ':')

          FsalA('(' + startTime + ' - ' + endTime + ') ' + event.summary + '\n')
        }
      } else {
        FsalA('Ingen møter');
      }

    });
  }

It looks like the code run before function handleClientLoad() { gapi.load('client:auth2', initClient); } is initialized, atleast that's my guess...

What the code does is getting events from a google calendar and transforms it into a text string on the webpage, the page shows events from 10 different calendars simultaneously, so this code is shot 12 times simultaneously but request events from different calendar ID's, when the code fails, it displays only one of 12 calendars, the rest of them give the error.

Edit: Here is where i call listUpcomingEvents from (commented on line)

      function handleClientLoad() {
    gapi.load('client:auth2', initClient);
  }


  function initClient() {
    gapi.client.init({
      discoveryDocs: DISCOVERY_DOCS,
      clientId: CLIENT_ID,
      scope: SCOPES
    }).then(function () {

      gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);


      updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
      authorizeButton.onclick = handleAuthClick;
      signoutButton.onclick = handleSignoutClick;
    });
  }


  function updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      authorizeButton.style.display = 'none';
      signoutButton.style.display = 'none';
      listUpcomingEvents();   //Calls the listUpcomingEvents
    } else {
      authorizeButton.style.display = 'block';
      signoutButton.style.display = 'none';
    }
  }

After that i have

<?php 
    include './static/js/FTA.php';

    include './static/js/FTB.php'; 

    include './static/js/GRN.php'; 

    include './static/js/KLB.php'; 

    include './static/js/KOB.php';

    include './static/js/KVA.php'; 

    include './static/js/SAN.php'; 

    include './static/js/SKI.php'; 

    include './static/js/SV1.php'; 

    include './static/js/SV2.php'; 

    include './static/js/THU.php'; 

    include './static/js/TRO.php'; 
    ?>

Which shoots the code that gives the error.

Answer 1

In my case, this failed similarly to your question:

gapi.client.init({...googleClientConfig}).then(function () {
  gapi.client.calendar.events.list({...calendarRequestParams}).then(function (response) {
    let events = response.result.items;
    /* do something with events */
  });
});

However, the following succeeds. The key to success is that extra line gapi.client.load('calendar', 'v3', ...):

gapi.client.init({...googleClientConfig}).then(() => {
    gapi.client.load('calendar', 'v3', () => {
      gapi.client.calendar.events.list({...calendarRequestParams}).then(function (response) {
        let events = response.result.items;
        /* do something with events */
      });
    });
});