YouTube Data API v3 Using Javascript

Question

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);
}
})

It just says "undefined" for some reason. I'll type something into the input box aka the search box, and hit the "enter" key. The console just says "undefined." — Chicken Sandwich No Pickles
– Chicken Sandwich No Pickles, Commented Nov 23, 2015 at 5:10
Can you please add just console.log(data); right above that and see if we get anything? :) — jaggedsoft
– jaggedsoft, Commented Nov 23, 2015 at 6:16
It works! Thank you! Do you know why I got something from console.log(data) and not console.log(data.search)? This might be a dumb question, but I'm still new with this stuff :) — Chicken Sandwich No Pickles
– Chicken Sandwich No Pickles, Commented Nov 23, 2015 at 7:42

jaggedsoft · Accepted Answer · 2015-11-23 16:39:22Z

1

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>');
  });
}

answered Nov 23, 2015 at 16:39

jaggedsoft

4,0582 gold badges35 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Chicken Sandwich No Pickles Over a year ago

One last question. I edited my original post to reflect newest code. I was going to start a completely new question, but I figured I'd just keep it here so that I can keep everything "together." So I have everything working; however, no matter what I put in the input box, nothing changes. For example, if I search for apples or pizza, I get the exact same result back. I'm guessing it has to do with using "stringify." I think because we are sending information from a browser to a server. If this is correct, do you have any advise on how I should do this? I am not having any luck with this.

jaggedsoft Over a year ago

@LunchBox: "q": "searchTerm", change to "q": searchTerm, .. in order to use the variable it can't be in quotes :)

Chicken Sandwich No Pickles Over a year ago

I thought when you used .getJSON, the keys had to be in double quotes? Should I remove the double quotes from everything in params? Or just q?

jaggedsoft Over a year ago

@LunchBox No everything else looks ok. Just so you understand the "key" of an array or object is its index. In this case the key is "q" and the value will be set to whatever the value of the searchTerm variable is (which is passed to the function) - So if your input box is filled with oranges it will ultimately end up equaling the same as "q": "oranges" Hopefully this makes sense :)

Chicken Sandwich No Pickles Over a year ago

Yup, I misunderstood what you typed the first time haha, thanks, everything works great now!

|

Collectives™ on Stack Overflow

YouTube Data API v3 Using Javascript

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related