Javascript - Display videoID using Youtube Data API

Question

Trying to work through a program I currently have, where I am unable to view the videoID from a search query.
I have the following code at the moment:

function makeRequest() {
    var q = $('#query').val();
    var request = gapi.client.youtube.search.list({
    q: q,
    part: 'snippet',
    maxResults: 20
    });
}

request.execute(function(response) {
    $('#results').empty()
    var srchItems = response.result.items;
    $.each(srchItems, function(index, item){
        vidTitle = item.snippet.title;
        vidThumburl = item.snippet.thumbnails.default.url;
        vidThumbimg = '<pre><img id="thumb" src="' + vidThumburl + '" alt="No Image Available." style="width:102px;height:64px"></pre>';
        vidID = item.id.videoId;
        $('#results').append('<pre>' + vidTitle + vidThumbimg + vidID+ '</pre>');
        })
    })

Looking at the last two substantial lines, I thought that the code would be enough to display the videoID as plain text, however, that is not currently working.
Any advice on how to properly display the videoID would be greatly appreciated.

Can you give an example of response.result.items and show the output for '<pre>' + vidTitle + vidThumbimg + vidID+ '</pre>' this will save me opening up the youtube API and should be able to answer this much quicker. Thank you. Mainly the Json result but maybe I could explain why your vidID isn't displaying. — NewToJS
– NewToJS, Commented Mar 28, 2017 at 11:00
is it me, or you looking at "item"? I thought it was supposed to be "items"! — Tempus
– Tempus, Commented Mar 28, 2017 at 21:32

Community · Accepted Answer · 2017-05-23 12:10:18Z

As additional information, try using the sample code provided by Google.

Here is the code from this post (made some adjustment):

<!doctype html>
<html>
  <head>
  <title>Search</title>
  </head>
  <body>
    <div id="buttons">
    <label> <input id="query" value='cats' type="text"/><button id="search-button"   onclick="keyWordsearch()">Search</button></label>    
    <div id="container">
      <h1>Search Results</h1>
      <ul id="results"></ul>
    </div>           
    <script>
     function keyWordsearch(){
        gapi.client.setApiKey('API_KEY');
        gapi.client.load('youtube', 'v3', function() {
                makeRequest();
        });
}
    function makeRequest() {
        var q = $('#query').val();
        var request = gapi.client.youtube.search.list({
                q: q,
                part: 'snippet', 
                maxResults: 10
        });
        request.execute(function(response)  {                                                                                    
                $('#results').empty()
                var srchItems = response.result.items;                
                $.each(srchItems, function(index, item) {
                vidTitle = item.snippet.title;  
                vidThumburl =  item.snippet.thumbnails.default.url;
                vidID = "video ID : " + item.id.videoId             
                vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No  Image Available." style="width:204px;height:128px"></pre>';                   

                $('#results').append('<pre>' + vidTitle + vidThumbimg + vidID +'</pre>');                      
        })  
    })  
}
  </script> 
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady">  </script>
</body>
</html>

Result:

Hope this helps.

Funny enough, my code started working after posting this question. I am not 100% sure why, maybe I forgot to save a file or my server wasn't updating, but thank you for your response!

Collectives™ on Stack Overflow

Javascript - Display videoID using Youtube Data API

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related