Youtube API query returns null

StackOverflow https://stackoverflow.com/questions/20864312

Question

The youtube search query for "Kanye West Amazing" should return several youtube links. However, the youtube query through the api is returning null (from console.log):

<!doctype html>
<html>
  <head>
    <title>Vidify</title>
  </head>

  <body>
    <!--Add a button for the user to click to initiate auth sequence -->
    <button id="authorize-button" style="visibility: hidden">Authorize</button>
    <script type="text/javascript">

      var clientId = '591751286145-ktngvf2s76uiuuevan6mo1fft0kchl8l.apps.googleusercontent.com';

      var apiKey = 'AIzaSyB0mteDV5vDKFR-iAv4Fx4OC2gp1Yhqe9U';

      var scopes = 'https://www.googleapis.com/auth/youtube';

      function handleClientLoad() {
        console.log('API key provided - authorizing client...');
        // Step 2: Reference the API key
        gapi.client.setApiKey(apiKey);
        gapi.auth.init(checkAuth);
      }

      function checkAuth() {
        console.log('entered checkAuth - authorizing...');
        setTimeout(function() { 
            console.log("requesting auth");
            gapi.auth.authorize({ 
                client_id: clientId, 
                scope: scopes, 
                response_type:'token',
                immediate: true 
            }, handleAuthResult); 
        }, 100); 
      }

      function handleAuthResult(authResult) {
        console.log('received authResult');
        var authorizeButton = document.getElementById('authorize-button');
        if (authResult && !authResult.error) {
          console.log("auth. successful");
          authorizeButton.style.visibility = 'hidden';
          makeApiCall();
        } else {
          console.log('auth failed.');
          authorizeButton.style.visibility = '';
          authorizeButton.onclick = handleAuthClick;
        }
      }

      function handleAuthClick(event) {
        // Step 3: get authorization to use private data
        console.log('retry');
        gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
        return false;

      }

      // Load the API and make an API call.  Display the results on the screen.
        function makeApiCall() {
            console.log("loaded client");
            gapi.client.setApiKey(apiKey);
            // Step 4: Load the Google+ API
            gapi.client.load('youtube', 'v3', function() {
                console.log('youtube API loaded...');
                // Step 5: Assemble the API request
                var qVar = "Kanye West Amazing"
                // changed. added: type
                var request = gapi.client.youtube.search.list({
                    type: 'video',
                    part: 'id',
                    q: qVar
                });
                // Step 6: Execute the API request
                request.execute(function(resp) {

                    console.log(resp);
                    var vid = document.createElement('vid');
                    vid.value = resp.items[0].id.videoId;
                    console.log(vid.value);
                    var youtube_url = "http://www.youtube.com/watch?v=";
                    youtube_url += vid.value;
                    youtube_url += "&rel=0";
                    window.open(youtube_url);
                });
              });
          }
    </script>

    <script src="https://apis.google.com/js/client.js?onload=makeApiCall"></script>

  </body>
</html>

So I'm actually trying to run this from within the spotify desktop application. The spotify apps system lets me load an index.html from within the "spotify browser." Here are the errors I'm getting now:

Uncaught TypeError: Cannot call method 'setApiKey' of undefined

index.html:63 makeApiCall index.html:63 (anonymous function)

client.js?onload=makeApiCall:6 fa client.js?onload=makeApiCall:1 b

client.js?onload=makeApiCall:6 v.(anonymous function)

client.js?onload=makeApiCall:6 H.(anonymous function)

client.js?onload=makeApiCall:6 (anonymous function) cb=gapi.loaded_0:1

Uncaught TypeError: Cannot read property 'prototype' of undefined cb=gapi.loaded_0:6

_.J cb=gapi.loaded_0:6 (anonymous function) cb=gapi.loaded_1:6 (anonymous function) client.js?onload=makeApiCall:4 Z

client.js?onload=makeApiCall:6 ua client.js?onload=makeApiCall:4 E

client.js?onload=makeApiCall:5 b client.js?onload=makeApiCall:6

v.(anonymous function) client.js?onload=makeApiCall:6 H.(anonymous function) client.js?onload=makeApiCall:6 (anonymous function) cb=gapi.loaded_1:1

Was it helpful?

Solution

Looks like you may have done your nesting incorrectly; you are running the request.execute call outside the gapi.client.load function's callback, so the actual request itself isn't created when it tries to run (the gapi client loads the APIs asynchronously). If instead you tried this:

  function makeApiCall() {
    // Step 4: Load the Google+ API
    gapi.client.load('youtube', 'v3', function() {
        console.log('youtube API loaded...');
        // Step 5: Assemble the API request
        var qVar = "Kanye West Amazing"
        // changed. added: type
        var request = gapi.client.youtube.search.list({
            type: 'video',
            part: 'id',
            q: qVar
        });
        // Step 6: Execute the API request
        request.execute(function(resp) {
          document.getElementById('vid').value = resp.items[1].id.videoId;
          console.log('saved video id successfully');
        });
      });
  }

Then it should wait and do the request only after the API code is loaded. This also assumes, of course, that you have an element with id "vid" (which your sample code didn't have).

As far as the scopes go, you don't need them for this particular call, as it's not one that needs to be authenticated (i.e. you can just run MakeApiCall() without authorization). However, if you'll be doing other things later that need authorization, it is functioning properly so you could just as easily leave it in.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top