Display JSON object using DataTables - javascript

I'm trying to display JSON results using DataTables, however I get blank table in the end. When I check browser console logs, I can see array of objects is being passed to display function but after that, nothing happens.
HTML Part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="functions.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"></script>
<div class="container">
<form>
<div class="form-group row">
<label for="foodLabel" class="col-sm-2 col-form-label">Search For Food Label</label>
<div class="col-sm-10">
<input class="form-control" type="search" id="foodLabel">
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" type="submit" id="submit" onclick="getFormData(); return false;">Submit</button>
</div>
</div>
</form>
</div>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
</table>
</body>
</html>
JS Part:
function getFormData(){
var foodLabel=document.getElementById('foodLabel').value;
document.getElementById('foodLabel').value = "";
var searchURL = buildSearchURL(foodLabel);
console.log(searchURL);
$.getJSON(searchURL, function(data){
//console.log(data);
//console.log(data.list.item);
display(data.list.item);
});
}
function buildSearchURL(label){
var searchURL = "http://api.nal.usda.gov/ndb/search/?format=json&q=" + label + "&sort=n&max=25&offset=0&api_key=DEMO_KEY";
return searchURL;
}
function display(data){
console.log(data);
$(document).ready(function() {
$('#example').DataTable( {
"json": data,
"columns": [
{"item": "name"}
]
} );
} );
}
It must be something completely obvious that I'm missing here.
I managed to figure this one out, apparently, Datatables library makes a call on it's, so I changed my display function:
function display(searchURL){
//console.log(data);
$(document).ready(function() {
$('#example').DataTable( {
ajax: {
url: searchURL,
dataSrc: 'list.item'
},
columns: [
{data: "name"}
]
} );
} );
}

You can not access the variable searchURL in display function, try this:
function display(searchURL){
//console.log(data);
$(document).ready(function() {
$('#example').DataTable( {
ajax: {
url:buildSearchURL(document.getElementById('foodLabel').value),
dataSrc: 'list.item'
},
columns: [
{data: "name"}
]
} );
} );
}

Related

Adding data to dynamic form

I am using this dynamic form generation code . https://www.jqueryscript.net/form/dynamic-forms-fields.html#google_vignette
Example : https://www.jqueryscript.net/demo/dynamic-forms-fields/
I have modified the html to take option value as input . I am adding options from an array. I want all the options to be shown from that array , on "Add" new form again the same options should come.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery Dynamic Forms Plugin Example</title>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/darkly/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/dynamic-form.js"></script>
<style>
.container { margin: 150px auto; }
h1 { margin-bottom: 50px; }
</style>
<script>
$(document).ready(function() {
var dynamic_form = $("#dynamic_form").dynamicForm("#dynamic_form","#plus5", "#minus5", {
limit:10,
formPrefix : "dynamic_form",
normalizeFullForm : false
});
$("#dynamic_form #minus5").on('click', function(){
var initDynamicId = $(this).closest('#dynamic_form').parent().find("[id^='dynamic_form']").length;
if (initDynamicId === 2) {
$(this).closest('#dynamic_form').next().find('#minus5').hide();
}
$(this).closest('#dynamic_form').remove();
});
});
function addLocation() {
var input_object1 = JSON.parse('[{"id":1,"name":"Pune","facilityType":"CAMPUS","feedback":true,"roomStateMode":2,"asDm":true,"defaultSlotId":3,"timezone":"Asia/Kolk ata","visitorKioskOtpAllow":true,"visitorKioskQrCode":true,"defaultSlotStartBefore":5,"visitorCheckInTemplate":"","visitorPassTemplate":"visitor-pass-horizontal","s howAttendance":true,"employeePassTemplate":"employee-pass-template_1.html","employeePassPreapprovedTemplate":"employee-pass-preapproved-template_1.html","employeePa ssAdminApprovalRequired":true,"employeePassMaxDays":15,"employeePassAllowExternalUsers":true,"employeePassAdminApprovalExternalUsers":true,"attendanceReportTemplate ":1,"visitorQuickCheckInTemplate":"visitor_quick_checkin_email_template.html","level":2,"deskGroupBookingAllow":true,"deskGroupBookingMaxPeople":5,"latitude":18.520 4,"longitude":73.8567,"city":"Pune","streetAddress":"","rosterMax":50,"rosterConfigType":1,"rosterAllowedUptoDays":30,"deskBookIfRoster":false,"disableDeskBookShift Option":true,"healthDeclarationNotificationPreHours":2,"healthDeclarationDeskBookingAutoCancelDays":3,"countryCode":"25","healthDeclarationDisableDeskCheckinWithout Pass":false,"deskBookingKioskQrCodeCheckin":true,"disableDeskBookAmenityOption":true,"deskBookMaxEndDays":10,"deskBookAvailableLevelWise":true,"deskBookingDisableCo worker":false,"deskBookingDefaultDuration":9,"deskBookingCovidVaccinationCertDisable":true,"visitorQuickInviteAllow":true,"visitorQuickInviteTitle":"test","visitorQ uickInvitePurpose":"Other","defaultRoomDisplayTheme":{"id":1,"name":"foo","homeImageId":215,"homeImageChecksum":"7c858c1e9e6c971cc360141e92fc918e","homeFontColor":" e5e0ec"}}]') ;
var input_object2 = JSON.parse('[1,8,11,83,37,88,40,42,41]');
var campush_from_dashboard = null;
// for the edit , it should look for the id
$.each(input_object1, function (index, value) {
if(campush_from_dashboard == null){
if (jQuery.inArray(value.id, input_object2) !== -1) {
$('<option>').val(JSON.stringify({
"campusId": value.id
})).text(value.name)
.appendTo('[id^=location]');
}
}
$.each(input_object1[index].facilities, function (index1, value1) {
if (jQuery.inArray(value1.id, input_object2) !== -1) {
$('<option>').val(JSON.stringify({
"campusId": value.id,
"buildingId": value1.id
})).text(value.name + value1.name)
.appendTo('[id^=location]');
}
$.each(input_object1[index].facilities[index].facilities, function (index2,
value2) {
if (jQuery.inArray(value2.id, input_object2) !== -1) {
$('<option>').val(JSON.stringify({
"campusId": value.id,
"buildingId": value1.id,
"floorId": value2.id
})).text(value.name + value1.name + value2.name)
.appendTo('[id^=location]');
}
});
});
});
};
</script>
</head>
<body>
<div class="container">
<form method="POST">
<label class="form-label">Advanced Properties for Desk Usage Analysis (Optional)</label>
<div class="form-group" id="dynamic_form">
<div class="row">
<div class="col-md-12 ">
<label for="location" class="form-label">Location</label>
<select class="form-select" name="location" id="location" placeholder="Location"
aria-describedby="teamsFeedback" required class="selectpicker" multiple>
</select>
</div>
<div class="button-group mt-2 mb-2 col-12">
<a href="javascript:void(0)" class="btn btn-primary " id="plus5" >Add More Advance Properties</a>
Remove
</div>
</div>
</div>
</form>
</div>
</body>

How to fix SyntaxError: function statement requires a name

I am trying to pull data from a json file and display it in a table on my web page. The json file is updated dynamically with data about movies from an api. The function that I am using right now is giving a syntax error about needing a name.
I have tried naming the function but so far nothing has worked. I'm new to web development so if it's an obvious answer I'm sorry.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Furby</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="static/layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
$(function() {
var table = document.getElementById('userdata');
for(var i = table.rows.length - 1; i > 0; i--)
{
table.deleteRow(i);
}
$.getJSON('static/movies.json', function(data) {
$.each(data.movie, function(i, f) {
var url = "https://image.tmdb.org/t/p/w92/" + f.url;
var tblRow = "<tr>" + "<td>" + f.title + "</td>" + "<td>" + "<img id = 'url_img' >" + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
document.getElementById('url_img').src = url;
document.getElementById('url_img').id = url;
});
});
});
</script>
</head>
<body id="top">
<div id="pageintro" class="hoc clear">
<!-- ################################################################################################ -->
<div class="flexslider basicslider">
<ul class="slides">
<li>
<article>
<h3 class="heading">Find A Movie</h3>
<p>Search from thousands of online movies!</p>
<footer>
<form class="group" method="post" action="search" onsubmit="function();">
<fieldset>
<legend>Search:</legend>
<input type="text" value="" placeholder="Search Hereā€¦" name="search">
<button class="fa fa-sign-in" type="submit" title="Submit"><em>Submit</em></button>
</fieldset>
</form>
</footer>
</article>
<div class="wrapper">
<div class="profile">
<table id= "userdata" border="2">
<thead>
<th>Title</th>
<th>Cover</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
<!-- ################################################################################################ -->
</div>
<!-- ################################################################################################ -->
<script src="static/layout/scripts/jquery.min.js"></script>
<script src="static/layout/scripts/jquery.backtotop.js"></script>
<script src="static/layout/scripts/jquery.mobilemenu.js"></script>
<script src="static/layout/scripts/jquery.flexslider-min.js"></script>
</body>
</html>
The code below will update my table with the movie titles and images once but I have to do a hard refresh on the page to get it to update. I assume it's the name error that is preventing it from running this code every time I search a movie.
EDIT: Added more relevant code. Sorry this is my first time posting.
Remove the inline event listener from the form.
<form class="group" method="post" action="search">
Name your function
function performSearch () {
var table = document.getElementById('userdata');
for (var i = table.rows.length - 1; i > 0; i--) {
table.deleteRow(i);
}
$.getJSON('static/movies.json', function(data) {
$.each(data.movie, function(i, f) {
var url = "https://image.tmdb.org/t/p/w92/" + f.url;
var tblRow = "<tr>" + "<td>" + f.title + "</td>" + "<td>" + "<img id = 'url_img' >" + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
document.getElementById('url_img').src = url;
document.getElementById('url_img').id = url;
});
});
}
Call your function on page load.
$(function(){
performSearch();
});
And setup the form to perform the search on submit.
$(function(){
performSearch();
$('.group[action="search"]').on('submit', function(e){
e.preventDefault();
performSearch();
});
});
1 ) You have 2 jQuery Lib, that wrong, you need only one also check versions
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
. . .
<script src="static/layout/scripts/jquery.min.js"></script>
2) your HTML table is not valid : you forget placing forget <tr> .... </tr>
<table>
<thead>
<tr>
<th>Title</th>
<th>Cover</th>
</tr>
</thead>
<tbody id="userdata-tbody"></tbody>
</table>
I also place the id="userdata-tbody" on the <tbody> otherwise you also delete your <thead> row
so place your jQuery lib before the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Furby</title>
<link href="static/layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<script src="static/layout/scripts/jquery.min.js"></script>
<script src="static/layout/scripts/jquery.backtotop.js"></script>
<script src="static/layout/scripts/jquery.mobilemenu.js"></script>
<script src="static/layout/scripts/jquery.flexslider-min.js"></script>
<script>
$(function () {
var tableUserData = document.getElementById('userdata-tbody');
...
for(var i = tableUserData.rows.length; i--;)
{
tableUserData.deleteRow(i);
}
...
});
</script>
</head>
<body>
...
<table>
<thead>
<tr>
<th>Title</th>
<th>Cover</th>
</tr>
</thead>
<tbody id="userdata-tbody"></tbody>
</table>
...
</body>
</html>

console.log not printing anything in Chrome

Can anyone please explain why console.log suddenly stopped to work? I'm trying to debug an exercise for an Angularjs class and at a certain point, console.log was not printing anything anymore.
I'using chrome and my cache is clear.
EDIT:
In this snippet and in Firefox console.log() works but in Chrome does not. How come?
(function () {
'use strict';
angular.module('Ass3', [])
.controller('NarrowItDownController', Narrowdown)
.service('MenuCategoriesService', MenuCategoriesService);
Narrowdown.$inject = ['MenuCategoriesService'];
function Narrowdown(MenuCategoriesService){
var nrdown = this;
var promise = MenuCategoriesService.getMatchedMenuItems();
}
MenuCategoriesService.$inject = ["$http"]
function MenuCategoriesService($http){
var service = this;
console.log("start");
service.getMatchedMenuItems = function(searchTerm){
return $http({
method : 'GET',
url: ("https://davids-restaurant.herokuapp.com/menu_items.json")
}).then(function(result){
var foundname = [];
angular.forEach(result.data.menu_items, function(value, key){
var name = value.name;
//console.log(typeof name);
if (name.toLowerCase().indexOf("chicken") !== -1){
foundname.push(name);
};
});
console.log("end");
return foundname;
});
}
}
})();
<!doctype html>
<html lang="en" ng-app='Ass3'>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" ></script>
<script type="text/javascript" src="app.js"></script>
<title>Narrow Down Your Menu Choice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div class="container" ng-controller="NarrowItDownController as nrdown">
<h1>Narrow Down</h1>
<div class="form-group">
<input type="text" placeholder="search term" class="form-control">
</div>
<div class="form-group narrow-button">
<button class="btn btn-primary">Narrow It Down For Me!</button>
</div>
<!-- found-items should be implemented as a component -->
<found-items found-items="...." on-remove="...."></found-items>
<ul>
<li ng-repeat="category in nrdown.categories">
{{categroy.name}}
</li>
</ul>
</div>
</body>
</html>
You have log placed after return statement
return foundname;
console.log("end");
Just swap this lines like so
console.log("end");
return foundname;
return foundname; should be below console.log()
(function () {
'use strict';
angular.module('Ass3', [])
.controller('NarrowItDownController', Narrowdown)
.service('MenuCategoriesService', MenuCategoriesService);
Narrowdown.$inject = ['MenuCategoriesService'];
function Narrowdown(MenuCategoriesService){
var nrdown = this;
debugger
var promise = MenuCategoriesService.getMatchedMenuItems();
}
MenuCategoriesService.$inject = ["$http"]
function MenuCategoriesService($http){
var service = this;
console.log("start");
service.getMatchedMenuItems = function(searchTerm){
return $http({
method : 'GET',
url: ("https://davids-restaurant.herokuapp.com/menu_items.json")
}).then(function(result){
var foundname = [];
angular.forEach(result.data.menu_items, function(value, key){
var name = value.name;
//console.log(typeof name);
if (name.toLowerCase().indexOf("chicken") !== -1){
foundname.push(name);
};
});
console.log("end");
return foundname;
});
}
}
})();
<!doctype html>
<html lang="en" ng-app='Ass3'>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" ></script>
<script type="text/javascript" src="app.js"></script>
<title>Narrow Down Your Menu Choice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div class="container" ng-controller="NarrowItDownController as nrdown">
<h1>Narrow Down</h1>
<div class="form-group">
<input type="text" placeholder="search term" class="form-control">
</div>
<div class="form-group narrow-button">
<button class="btn btn-primary">Narrow It Down For Me!</button>
</div>
<!-- found-items should be implemented as a component -->
<found-items found-items="...." on-remove="...."></found-items>
<ul>
<li ng-repeat="category in nrdown.categories">
{{categroy.name}}
</li>
</ul>
</div>
</body>
</html>

spPageContextInfo is not defined

I am trying to add userName use AngularJs into Sharepoint. Also, i should have a feature that I should view all the userName from SharePoint list. But i keeping getting error says '_spPageContextInfo is not defined'.
I am start learning SharePoint and AngularJs. Can someone help me with it? Thank you.
Here is the code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<!-- modules -->
<script src="app.js"></script>
<!-- controllers -->
<script src="view.js"></script>
<script src="add.js"></script>
</head>
<body ng-app="myApp">
<h3>view</h3>
<div class="view" ng-controller="viewItemsController" ng-repeat="user in users">
<!-- {{user.ID}}: -->
{{user.Title}}, {{user.FirstName}},{{user.LastName}}
<br />
</div>
<hr>
<h3>add</h3>
<div class="add" ng-controller="addItemsController">
<div class="Table">
<div class="Row">
<div class="Cell">Title :</div>
<div class="Cell">
<input type="text" id="title" ng-model="title" />
</div>
</div>
<div class="Row">
<div class="Cell">First Name :</div>
<div class="Cell">
<input type="text" id="firstName" ng-model="firstName" />
</div>
</div>
<div class="Row">
<div class="Cell">Last Name :</div>
<div class="Cell">
<input type="text" id="lastName" ng-model="lastName" />
</div>
</div>
<div class="Row">
<div class="Cell"></div>
<div class="Cell">
<input type="button" id="btnAddContact" value="Add Name" ng-click="addContact()" />
</div>
</div>
</div>
</div>
</body>
</html>
app.js //this is module
var spApp = angular.module('myApp',[]);
view.js // first controller
spApp.controller("viewItemsController", function ($scope, $http) {
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Users')/items?$select=Title,First_Name,Last_Name";
$http(
{
method: "GET",
url: url,
headers: { "accept": "application/json;odata=verbose" }
}
).success(function (data, status, headers, config) {
console.log(data);
$scope.users = data.d.results;
}).error(function (data, status, headers, config) {
});
});
add.js // second controller
spApp.controller("addItemsController",function($scope,$http){
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Users')/items";
var vm = $scope;
vm.addContact = function () {
return $http({
headers: { "Accept": "application/json; odata=verbose", "X-RequestDigest": jQuery("#__REQUESTDIGEST").val() },
method: "POST",
url: url,
data: {
'Title': vm.title,
'First_Name': vm.firstName,
'Last_Name':vm.lastName
}
})
.then(saveContact)
.catch(function (message) {
console.log("addContact() error: " + message);
});
function saveContact(data, status, headers, config) {
alert("User Added Successfully");
return data.data.d;
}
}
});
I go through your code, you have made spelling mistake with the script tag
If you see your Html code which you have added into your question
<!-- controllers -->
<sript src="view.js"></script>
<sript src="add.js"></script>
I have test your code on my system by correcting the spelling mistake as bellow and its working.
<!-- controllers -->
<script src="view.js"></script>
<script src="add.js"></script>
Hope so this will help you.

How do I fix the :ERR_BLOCKED_BY_CLIENT Error with Youtube Data Api V3 when displaying youtube videos using Iframe on the DOM?

I'm testing the Youtube Data API V3 to get a list videos by a query term and subsequently play them in an iframe.
I'm getting this error:
www-embed-player.js:306 GET https://googleads.g.doubleclick.net/pagead/id?exp=nomnom net::ERR_BLOCKED_BY_CLIENT
After some debugging and googling, I discovered that this error is often caused by adblockers. I've then disabled mine on Chrome and then retested the api call.
I no longer see the original error :ERR_BLOCKED_BY_CLIENT but my videos retrieved do not play. Player message: An error occurred, please try again later.
Below is the code. The JS is in the HTML file itself for simplicity.
Any help appreciated!
<!doctype html>
<html lang="en">
<head>
<title>Youtube API Test </title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
</head>
<style>
body {
background-color: #0F0F0F;
}
button.btn.btn-primary {
background-color: #E12523;
border-color: #E12523;
}
div.jumbotron {
background-color: #292929;
color: #B3B3B3;
}
hr.my-2 {
border: 1px solid #B3B3B3;
}
</style>
<body>
<div class="wrapper container">
<div class="jumbotron">
<h1 class="display-3">Youtube Api</h1>
<p class="lead">Let's use the Yotube Api to get videos</p>
<hr class="my-2">
<form>
<div class="form-group">
<label for="user-query"></label>
<input type="text" class="form-control" id="user-query" aria-describedby="emailHelp" placeholder="Search Youtube">
</div>
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</form>
</div>
</div>
<div class="container" id="results"></div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
<script type="text/javascript">
//Get Videos
$("#submit").on("click", function (event) {
event.preventDefault();
var queryTerm = $("#user-query").val().trim();
$.ajax({
url: "https://www.googleapis.com/youtube/v3/search?part=snippet&q=" + queryTerm + "&type=video&key=[MY API KEY]",
method: "GET"
}).then(function (data) {
console.log(data);
$.each(data.items, (i, item) => {
console.log(data.item);
const videoId = item.id.videoId;
let $iFrameContainer = $(`<iframe width="420" height="345" src="https://www.youtube.com/embed/"' ${videoId} '> <\/iframe >`);
$("#results").append($iFrameContainer);
})
});
})
</script>
</body>
</html>

Categories