YouTube Data API v3 Using Javascript

I am kind of new to writing code and using API's. I am not entirely sure why my program is not working the way I would like it to.

What I want this to do is provide the search results in the console before I can move onto what I would like it to do next; however, I don't think anything is being searched.

According to this: https://developers.google.com/youtube/v3/docs/search/list#http-request, the only required parameter is "part," so I think I did everything right? Probably not though, because from what I can tell, nothing is being searched when I try to search for a term. Here is my code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <section>
        <form id="search-term">
            <p>Enter Name:<br/>
                <input id="query" type="text" name="Name"/><br/>
                <hr/>
                <input type="button" value="Enter here"/>
            </p>
            <div id="search-results">

            </div>
        </form>
    </section>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

JavaScript:

  $(document).ready(function(){

  $('#search-term').submit(function(event){
    event.preventDefault();
    var searchTerm = $('#query').val();
    getRequest(searchTerm);
  });


function getRequest(searchTerm){
  var params = {
    "q": "searchTerm",
    "part": 'snippet',
    "type": 'video',
    "key": 'I was advised to keep my key private, so I edited this part out'
  }
  url = 'https://www.googleapis.com/youtube/v3/search';

  $.getJSON(url, params, function(data){
    showResults(data.items);
   })
}

function showResults(results){
  var html = "";

  $.each(results, function(index,value){
    html += '<p>' + value.snippet.thumbnails.high.url + '</p>' + '<p>' + 'https://www.youtube.com/watch?v=' + value.id.videoId + '</p>' + '<hr/>';
    console.log(value.snippet.thumbnails.high.url);
    console.log(value);
  })
  $('#search-results').html(html);
}
})

You probably want data.items instead of data.search

I don't see any mention of a 'search' parameter under the "Response" section listed in their documentation. See the response properties here: https://developers.google.com/youtube/v3/docs/search/list#response

Therefore, you can probably see some output if you console.log(data); instead of data.search

I recommend you check out Google's Javascript API Client Library. It might not be the best solution for you, but it's worth a try. Download on GitHub

Example using gapi.client.youtube.search.list:

// After the API loads, call a function to enable the search box.
function handleAPILoaded() {
  $('#search-button').attr('disabled', false);
}

// Search for a specified string.
function search() {
  var q = $('#query').val();
  var request = gapi.client.youtube.search.list({
    q: q,
    part: 'snippet'
  });

  request.execute(function(response) {
    var str = JSON.stringify(response.result);
    $('#search-container').html('<pre>' + str + '</pre>');
  });
}

来源：https://stackoverflow.com/questions/33863807/youtube-data-api-v3-using-javascript

标签

javascript

youtube-data-api