Menu
Total newbie, first project and im not doing too well. Need to pull a simple search of youtube videos that display the titles queried on:
Here is my JS:
$(function() {
$('#search-term').submit(function(event) {
event.preventDefault();
var searchTerm = $('#query').val();
getRequest(searchTerm);
});
});
function getRequest(searchTerm) {
var params = {
part: 'snippet',
key: '',
q: query
};
url = 'https://www.googleapis.com/youtube/v3/search';
$.getJSON(url, params, function(data) {
showResults(data.Search);
});
}
function showResults(results) {
var html = "";
$.each(results, function(index, value) {
html += '<p>' + video.snippet.title + '</p>';
console.log(video.snippet.title);
});
$('#search-results').html(html);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Youtube Project</title>
</head>
<body>
<form id="search-term">
Entry:
<br>
<input id="query" type="text">
<br>
<input type="submit" value="Submit">
</form>
<div id="search-results">
</div>
</body>
</html>Go easy on me, any help is appreciated, here is the jsfiddle: https://jsfiddle.net/jelane20/3hbrv12k/1/
473
Returns a collection of search results that match the query parameters specified in the API request. By default, a search result set identifies matching video , channel , and playlist resources, but you can also configure queries to only retrieve a specific type of resource. Try it now.
YouTube Data API costs are based on quota usage, and all requests will incur at least a 1-point quota cost. For each project, you're allowed 10,000 free quota units per day.
Got it!
$(document).ready(function () {
$('#search-term').submit(function (event) {
event.preventDefault();
var searchTerm = $('#query').val();
getRequest(searchTerm);
});
});
function getRequest(searchTerm) {
var url = 'https://www.googleapis.com/youtube/v3/search';
var params = {
part: 'snippet',
key: 'XXXXXX',
q: searchTerm
};
$.getJSON(url, params, showResults);
}
function showResults(results) {
var html = "";
var entries = results.items;
$.each(entries, function (index, value) {
var title = value.snippet.title;
var thumbnail = value.snippet.thumbnails.default.url;
html += '<p>' + title + '</p>';
html += '<img src="' + thumbnail + '">';
});
$('#search-results').html(html);
}If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With