How to create youtube search via API

Total newcomers, the first project and they are not too good. You need to pull a simple YouTube video search that displays the titles for which you are requesting:

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 jsfiddle: https://jsfiddle.net/jelane20/3hbrv12k/1/

+5
source share
1 answer

Got it!

 $(document).ready(function () { $('#search-term').submit(function (event) { event.preventDefault(); var searchTerm = $('#query').val(); getRequest(searchTerm); }); }); function getRequest(searchTerm) { url = 'https://www.googleapis.com/youtube/v3/search'; var params = { part: 'snippet', key: 'XXXXXX', q: searchTerm }; $.getJSON(url, params, function (searchTerm) { showResults(searchTerm); }); } 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); } 
+4
source

Source: https://habr.com/ru/post/1242803/


All Articles