Google Calendar API CalendarList.list() returns a weird object - JS

Question

I want to get the list of the calendars of a user with JS by using CalendarList.list() as stated in the documentation. But for me I only get a weird object as response, that always looks like this:

{
    "Yd": 1,
    "mb": {
        "Vf": null,
        "yh": {
            "path": "/calendar/v3/users/me/calendarList",
            "method": "GET",
            "params": {},
            "headers": {},
            "root": "https://www.googleapis.com",
            "apiId": "calendar:v3"
        },
        "Cl": "auto",
        "G_": false,
        "VN": false,
        "aQ": false
    }
}

I'm using the standard code from the quickstart which works fine for me, only this one request returns a weird result.

It looks like this in my code (just the part of it that should be interesting):

function initClient() {
      gapi.client.init({
        apiKey: API_KEY,
        clientId: CLIENT_ID,
        discoveryDocs: DISCOVERY_DOCS,
        scope: SCOPES
      }).then(function() {
        // Listen for sign-in state changes.
        gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

        // Handle the initial sign-in state.
        updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
        authorizeButton.onclick = handleAuthClick;
        signoutButton.onclick = handleSignoutClick;
      }, function(error) {
        changeSpanText(JSON.stringify(error, null, 2));
      });
    }


function updateSigninStatus(isSignedIn) {
      if (isSignedIn) {
        authorizeButton.style.display = 'none';
        signoutButton.style.display = 'flex';
        changeSpanText("🎉 You have been logged in succesfully");
        console.log(gapi.client.calendar.calendarList.list());
      } else {
        authorizeButton.style.display = 'flex';
        signoutButton.style.display = 'none';
        changeSpanText("");
      }
    }

Answer 1

I was able to reproduce the issue using the code shared and effectively, this is something related to how the response is output to the console, making a few modifications like below:

            function updateSigninStatus(isSignedIn) {
            if (isSignedIn) {
                authorizeButton.style.display = 'none';
                signoutButton.style.display = 'flex';
                gapi.client.calendar.calendarList.list({}).then(function (response) { // Handle the results here (response.result has the parsed body).
                    console.log("Response", JSON.stringify(response, null,2));
                }, function (err) {
                    console.error("Execute error", err);
                });

            } else {
                authorizeButton.style.display = 'flex';
                signoutButton.style.display = 'none';
            }
        }

I got a successful and correctly formatted output:

If instead of the entire output you wish to have only some of the detail fields like 'summary' you can do the below:

            function updateSigninStatus(isSignedIn) {
            if (isSignedIn) {
                authorizeButton.style.display = 'none';
                signoutButton.style.display = 'block';
                listCalends();

            } else {
                authorizeButton.style.display = 'block';
                signoutButton.style.display = 'none';
            }
        }
         function listCalends() {
            gapi.client.calendar.calendarList.list().then(function (response) {
               var calendar = response.result.items;
               var strinx = calendar;
               console.log('Calendars owned by this user are: ');
               for (let index = 0 ; index < strinx.length; index++) {                    
                  console.log( strinx[index]['summary']);                      
               } 
            });
        }

Recommendation:

If you are unsure as how to go about doing something with Google APIs using Javascript I encourage you to use their Try this API and click on the 'Javascript' option where it will show you how the request was made so you can have some reference for future projects.