We Keep Coding

JSPrintManager isn't detecting my installed scanner

I am trying to scan a document with the click of a button in javascript. This is my code:
HTML:
<div class="mb-3" style="width: 50%; margin: 0 auto; border: 2px solid white;">
<label for="scannerName">Select preferred scanner :</label><br>
<select name="scannerName" id="scannerName" style="text-align: center; width: 50%;"></select><br><br>
<label for="pixelMode">Select pixel mode :</label><br>
<select name="pixelMode" id="pixelMode" style="text-align: center; width: 50%;"></select><br><br>
<label for="resolution">Select resolution :</label><br>
<select name="resolution" id="resolution" style="text-align: center; width: 50%;"></select><br><br>
<label for="imageFormat">Select image format :</label><br>
<select name="imageFormat" id="imageFormat" style="text-align: center; width: 50%;"></select><br><br>
</div>
<div class="d-grid gap-*" style="position: absolute; top: 100%; left: 46%;">
<button type="button" class="btn btn-primary btn-block" onclick="doScanning()">Upload</button>
</div>
JS:
var scannerDevices = null;
var _this = this;
//JSPrintManager WebSocket settings
JSPM.JSPrintManager.auto_reconnect = true;
JSPM.JSPrintManager.start();
JSPM.JSPrintManager.WS.onStatusChanged = function () {
if (jspmWSStatus()) {
//get scanners
JSPM.JSPrintManager.getScanners().then(function (scannersList) {
scannerDevices = scannersList;
var options = '';
if(scannerDevices.length>0){
for (var i = 0; i < scannerDevices.length; i++) {
options += '<option>' + scannerDevices[i] + '</option>';
}
}
else{
var options_new='';
options_new += '<option>' + "Not applicable" + '</option>';
$('#pixelMode').html(options_new);
$('#resolution').html(options_new);
$('#imageFormat').html(options_new);
options += '<option>' + "No scanners found installed" + '</option>';
}
$('#scannerName').html(options);
});
}
};
//Check JSPM WebSocket status
function jspmWSStatus() {
if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Open)
return true;
else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Closed) {
console.warn('JSPrintManager (JSPM) is not installed or not running! Download JSPM Client App from https://neodynamic.com/downloads/jspm');
return false;
}
else if (JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Blocked) {
alert('JSPM has blocked this website!');
return false;
}
}
//Do scanning...
function doScanning() {
if (jspmWSStatus()) {
//create ClientScanJob
var csj = new JSPM.ClientScanJob();
//scanning settings
csj.scannerName = $('#scannerName').val();
csj.pixelMode = JSPM.PixelMode[$('#pixelMode').val()];
csj.resolution = parseInt($('#resolution').val());
csj.imageFormat = JSPM.ScannerImageFormatOutput[$('#imageFormat').val()];
let _this = this;
//get output image
csj.onUpdate = (data, last) => {
if (!(data instanceof Blob)) {
console.info(data);
return;
}
var imgBlob = new Blob([data]);
if (imgBlob.size == 0) return;
var data_type = 'image/jpg';
if (csj.imageFormat == JSPM.ScannerImageFormatOutput.PNG) data_type = 'image/png';
//create html image obj from scan output
var img = URL.createObjectURL(imgBlob, { type: data_type });
//scale original image to be screen size friendly
/*var imgScale = { width: Math.round(96.0 / csj.resolution * 100.0) + "%", height: 'auto' };
$('#scanOutput').css(imgScale);
$('#scanOutput').attr("src", img);*/
}
csj.onError = function (data, is_critical) {
console.error(data);
};
//Send scan job to scanner!
csj.sendToClient().then(data => console.info(data));
}
}
I've followed each and every step mentioned in this site:
https://www.neodynamic.com/articles/How-to-scan-documents-images-from-Javascript/
But I keep getting the message "No scanners are installed" in my scannerName select tag. In fact, when I go to the JS console, I get this message:
JSPrintManager License: Objectresult: "Invalid License"[[Prototype]]:
Object...
My scanner is a Canon canoscan lide 25. It's TWAIN compatible so it should be detected. How do I fix this issue? Do I have to buy the license?

I am trying to write a couple of functions, one that adds a book to a empty array and another function that renders it on the page. Its not working

I want to be able to write the title of a book for now, then have it save to an array. When I click add book it should pop up right below the example text on the page, however im not sure why my functions are not working. Im new to this so its a bit confusing.
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>Library</h1>
<button type="button" onclick="addBookToLibrary();" id="addButton">Add
A Book</button>
<div class="formContainer">
<form id="info">
<input type="text" placeholder="Title" id="title">
<input type="text" placeholder="Author"
id="author">
<input type="number" placeholder="#Pages" min="0" max="5000"
id="number">
<label for="read">Read?</label>
<input type="checkbox" id="read">
</form>
</div>
</div>
<hr>
<div class="bookContainer">
<div class="wrapper">
<h2>Title</h2>
<h2>Author</h2>
<h2>Pages</h2>
<h2>Read</h2>
</div>
<div class="books">
<p class="item">The Hobbit</p>
<p class="item">by J.R.R. Tolkien</p>
<p class="item">295 pages</p>
<p class="item">Read</p>
</div>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#addButton {
margin-bottom: 1em;
}
.container {
text-align: center
}
.container h1 {
margin-top: .5em;
margin-bottom: .5em;
}
hr {
margin-top: 2em;
margin-bottom: 2em;
}
.bookContainer{
width: 90%;
border:2px solid black;
margin: auto;
}
.wrapper {
display: flex;
justify-content: space-around;
}
.books {
display: flex;
justify-content: space-around;
margin-top: 1em;
}
.item {
flex:1;
text-align:center;
}
#number {
width: 8%;
}
let myLibrary = [];
function book(title, author, pages, read) {
this.title = title
this.author = author
this.pages = pages
this.read = read
this.info = function() {
console.log(title, author, pages, read);
}
}
function addBookToLibrary() {
// get value from the input text
let title = document.querySelector('#title').value;
//append data to the array myLibrary
myLibrary.push(title);
let pval = '';
for (i = 0; i < myLibrary.length; i++) {
pval = pval + myLibrary[i] + '<br/>';
}
}
function render() {
//display array data
document.querySelector('.wrapper').innerHTML = pval;
}
I didnt add the html bc i didnt want it to be super long, but if you need it i can always add it.

Your pval is not in the same scope with function render. And try to keep your array storing only data instead of html string so that you can keep flexibility to do any thing.
let myLibrary = [
{
title: 'The Hobbit',
author: 'by J.R.R. Tolkien',
pages: '295 pages',
read: 'Read'
}
];
function book(title, author, pages, read) {
this.title = title
this.author = author
this.pages = pages
this.read = read
this.info = function () {
console.log(title, author, pages, read);
}
}
function addBookToLibrary() {
// get value from the input text
let title = document.querySelector('#title').value;
let author = document.querySelector('#author').value;
let pages = document.querySelector('#number').value;
let read = document.querySelector('#read').checked ? document.querySelector('#read').value : '';
// create a book
let b1 = new book(title, author, pages, read);
// append data to the array myLibrary
myLibrary.push(b1);
// invoke render function
render();
}
function render() {
//display array data
let pval = '';
for (i = 0; i < myLibrary.length; i++) {
pval += '<div class="book">';
pval += '<p class="item">' + myLibrary[i].title + '</p>';
pval += '<p class="item">' + myLibrary[i].author + '</p>';
pval += '<p class="item">' + myLibrary[i].pages + '</p>';
pval += '<p class="item">' + myLibrary[i].read + '</p>';
pval += '</div>'
}
document.querySelector('.books').innerHTML = pval;
}
You should provide a specific description instead of 'Doesnt work' only. Such as error message or the steps you put the code snippet in your program. It will always work if try to modify the code snippet above to fit your scenario. That's what we can't help you because we don't know what you want.
Anyway, you can check the link of solution which I've tried to understand your need below. And try to modify it to fit your need.
https://jsfiddle.net/chi1010860/Lc71w2f0/

take a look here : https://www.w3schools.com/js/js_arrays.asp
var myLibrary = new Array();
function book(title, author, pages, read) {
this.title = title
this.author = author
this.pages = pages
this.read = read
this.info = function() {
console.log(title, author, pages, read);
}
}
function addBookToLibrary() {
// get value from the input text
var title = document.querySelector('#title').value;
//append data to the array myLibrary
myLibrary.push(title);
var pval = '';
for (var i in myLibrary) {
if(myLibrary[i])pval = pval + myLibrary[i] + '<br/>';
}
}
function render() {
//display array data
document.querySelector('.wrapper').innerHTML = pval;
}

how to restrict duplicate data in dynamic table

i just hit a demo api with link and created a dynamic table and in every click of parameter a new row is inserted with it, i just want to resitrict duplicate entry from table.
$(document).ready(function () {
//count = 1;
var counter=1,flag=0;
$("#api").click(function () {
var index = ($("#para").val());
if (index == "") {
alert("Please input data");
return false;
}
else{
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/'+index,
type: 'GET',
dataType: 'json',
crossDomain: true,
success: function (data, textStatus, xhr) {
console.log(data);
var tr = [];
if(flag==0){
mytable = $('<table></table>').attr({ id: "basicTable", class:"basicTable1" });
//for (var i = 0; i < count; i++) {
let ab = $('<h1>API Data</h1>').appendTo("#h");
let row = $('<tr></tr>').appendTo(mytable);
let row1 = $('<tr id="row'+counter+'" ></tr>').appendTo(mytable);
$.each(data, function(key, val) {
$('<th></th>').text(key).appendTo(row);
$('<td></td>').text(val).appendTo(row1);
});
let row2 = $('<button class="button1" id="button'+ counter+'" onclick=removeFun('+ counter+')>remove Row</button>').appendTo(row1);
flag=1;
counter++;
//}
mytable.appendTo("#data");
}
else{
//for (var i = 0; i < count; i++) {
let row = $('<tr id="row'+counter+'" ></tr>').appendTo(mytable);
$.each(data, function(key, val) {
$('<td></td>').text(val).appendTo(row);
});
let row1 = $('<button class="button1" id="button'+ counter+'" onclick=removeFun('+ counter+')>remove Row</button>').appendTo(row);
counter++;
//}
mytable.appendTo("#data");
}
},
error: function (xhr, textStatus, errorThrown) {
console.log(errorThrown);
alert("No Record Found");
}
});
}
});
});
function removeFun(a){
$("#row"+a).remove();
}
var textbox = $("#data");
textbox.change(function() {
$("#basicTable").find("td").each(function(){
if($(this).html()==textbox.val()){
alert(textbox.val());
};
})
});
.h1{
color: orange;
margin:30px;
}
.h2{
margin-top: 20px;
}
table, th, td {
border: 2.5px solid black;
align-content: center;
}
table{
width: 80%;
text-align: center;
}
th{
height: 50px;
align-content: right;
background-color: orange;
}
th:hover {background-color: #3e8e41}
th,td{
width: 30%;
}
.button1 {
padding: 10px 15px;
font-size: 14px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: orange;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button1:hover {background-color: #3e8e41}
.button1:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
<!DOCTYPE html>
<html>
<head>
<title>Api hit with JSON</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<center><u class="h1">AJAX</u> api with JSON</center>
<center>
<div class="h2">
<label>Enter the parameter</label>
<input type="number" name="" id="para">
<button id="api">Submit</button>
</div>
<div id="h"></div>
<div id="data"></div>
</center>
</body>
</html>
This is my file, I hit the demo api with link and get the data to dynamic table but I want to restrict duplicate files in the dynamic table.
$(document).ready(function () {
//count = 1;
var counter=1,flag=0;
$("#api").click(function () {
var index = ($("#para").val());
if (index == "") {
alert("Please input data");
return false;
}
else{
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/'+index,
type: 'GET',
dataType: 'json',
crossDomain: true,
success: function (data, textStatus, xhr) {
console.log(data);
var tr = [];
if(flag==0){
mytable = $('<table></table>').attr({ id: "basicTable", class:"basicTable1" });
//for (var i = 0; i < count; i++) {
let ab = $('<h1>API Data</h1>').appendTo("#h");
let row = $('<tr></tr>').appendTo(mytable);
let row1 = $('<tr id="row'+counter+'" ></tr>').appendTo(mytable);
$.each(data, function(key, val) {
$('<th></th>').text(key).appendTo(row);
$('<td></td>').text(val).appendTo(row1);
});
let row2 = $('<button class="button1" id="button'+ counter+'" onclick=removeFun('+ counter+')>remove Row</button>').appendTo(row1);
flag=1;
counter++;
//}
mytable.appendTo("#data");
}
else{
//for (var i = 0; i < count; i++) {
let row = $('<tr id="row'+counter+'" ></tr>').appendTo(mytable);
$.each(data, function(key, val) {
$('<td></td>').text(val).appendTo(row);
});
let row1 = $('<button class="button1" id="button'+ counter+'" onclick=removeFun('+ counter+')>remove Row</button>').appendTo(row);
counter++;
//}
mytable.appendTo("#data");
}
},
error: function (xhr, textStatus, errorThrown) {
console.log(errorThrown);
alert("No Record Found");
}
});
}
});
});
function removeFun(a){
$("#row"+a).remove();
}

first you need to remove duplicates from your "data"
var GroupByColumn = function (SourceData, columnName) {
var Unique = {};
var groupByColumn = columnName;
var tempData = SourceData;
for (var i = 0; i < tempData.length; i++) {
if (!Unique[tempData[i][groupByColumn]])
Unique[tempData[i][groupByColumn]] = [];
Unique[tempData[i][groupByColumn]].push(tempData[i]);
}
return Unique;
}
by using above function you can find a unique data
var z= [
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
},
{
"userId": 1,
"id": 2,
"title": "quis ut nam facilis et officia qui",
"completed": false
}
]
GroupByColumn(z,"id")
GroupByColumn(z,"title")
GroupByColumn(z,"completed")
GroupByColumn(z,"userId")
depepends on your need it will return your data. hope this will be helpful

update bar chart with drop down menu

I am trying to change the value of xmlURL based on my drop down menu. When the value is passed down on I want to reload my bar chart. Any tips?
google.load('visualization', '1', {
packages: ['corechart', 'bar']
});
google.setOnLoadCallback(drawStacked);
var identified_cash_flows = 0;
var Unidentified_transaction = 0;
var Unidentified_transaction, _within_overall_threshold = 0;
var Identified_counterparty, _unidentified_transaction, _above_threshold = 0;
var Identified_counterparty, _unidentified_transaction, _within_overall_threshold = 0;
var Identified_counterparty, _unidentified_amount, _above_threshold = 0;
var Identified_counterparty, _unidentified_amount, _within_overall_threshold = 0;
var Identified_transaction, _frequency_limit = 0;
var Identified_transaction, _above_cumulative_threshold = 0;
var Identified_transaction, _unidentified_type = 0;
var Identified_transaction = 0;
var counts = {};
var xmlURL = "https://connect.compliancewise.nl/compliancewise/sheetViewExportXML.action?metaData.siteID=242&metaData.sheetId=3832&metaData.sheetViewID=26050&metaData.isheetExportType=xml";
var xmlURL2 = "https://connect.compliancewise.nl/compliancewise/sheetViewExportXML.action?metaData.siteID=242&metaData.sheetId=3832&metaData.sheetViewID=25667&metaData.isheetExportType=xml";
var xml;
var urlie;
var selectUrl;
window.onload = function() {
selectUrl = document.getElementById('selectYear');
}
function changeHiddenInput(objDropDown) {
console.log(objDropDown);
var objHidden = document.getElementById("hiddenInput");
objHidden.value = objDropDown.value;
urlie = objHidden.value;
result.innerHTML = urlie || "";
}
$j.ajax({
url: xmlUrl,
dataType: "xml",
beforeSend: function() {
$j('#loader').hide();
},
success: function(data) {
xml = data;
$j('#loader').hide();
createBarchart();
}
});
<td colspan="2" rowspan="2" style="height: 300px;">
<select id="selectYear" onchange="changeHiddenInput(this)">
<option selected="selected" value="https://connect.compliancewise.nl/compliancewise/sheetViewExportXML.action?metaData.siteID=242&metaData.sheetId=3832&metaData.sheetViewID=26050&metaData.isheetExportType=xml">2016</option>
<option value="https://connect.compliancewise.nl/compliancewise/sheetViewExportXML.action?metaData.siteID=242&metaData.sheetId=3832&metaData.sheetViewID=25667&metaData.isheetExportType=xml">2017</option>
</select>
<input type="hidden" name="hiddenInput" id="hiddenInput" value="" />
<script type="text/javascript" src="https://www.google.com/jsapi?autoload= {'modules':[{'name':'visualization','version':'1.1','packages':['corechart', 'bar']}]}"></script>
<div style="border: 0px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 100%;">
I know I am using old library loader code but that is for reasons.

There are two undefined values of drawStacked and result

How to show first youtube video in iframe and other in thumbnail?

Hi I want to show only the first video in iframe while other in thumbnail.
Here is my code you can run it on localhost.If you have any solution then please reply me.
index.php file
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title>youtube Channel Videos</title>
<style>
body{
background: #f4f4f4;
font-family: "Arial" sans-serif;
font-size: 14px;
color: #666;
}
#container{
width: 800px;
overflow: auto;
margin: auto;
background: #fff;
padding: 15px;
}
.anc{
padding: 2px 6px;
background: #EFF7FF;
color: #069;
border: 1px solid #C2D9EF;
margin: 0px 0px 0px 5px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
text-decoration: none;
text-align: center;
}
</style>
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">-->
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<!-- <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
<script src="js/script.js"></script>
</head>
<body>
<?php
// put your code here
?>
<div id="container">
<h1>Youtube Videos</h1>
<ul id="results">
</ul>
<div id="page" style="padding-top: 15px;padding-left: 42px;"></div>
</div>
<script>
players = new Array();
//alert($("iframe.yt_players"));
function onYouTubeIframeAPIReady() {
var temp = $("iframe.yt_players");
for (var i = 0; i < temp.length; i++) {
var t = new YT.Player($(temp[i]).attr('id'), {
events: {
'onStateChange': onPlayerStateChange
}
});
players.push(t);
}
}
window.onload = setTimeout(onYouTubeIframeAPIReady, 10000);
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
var temp = event.target.a.src;
var tempPlayers = $("iframe.yt_players");
for (var i = 0; i < players.length; i++) {
if (players[i].a.src != temp) players[i].stopVideo();
}
}
}
</script>
</body>
</html>
script.js file
function tplawesome(template, data) {
// initiate the result to the basic template
res = template;
// for each data key, replace the content of the brackets with the data
for(var i = 0; i < data.length; i++) {
res = res.replace(/\{\{(.*?)\}\}/g, function(match, j) { // some magic regex
return data[i][j];
});
}
return res;
}
var channelName= "TechGuyWeb";
$(document).ready(function(){
$.get("https://www.googleapis.com/youtube/v3/channels",{
part: 'contentDetails',
forUsername: channelName,
key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
function(data){
console.log(data);
$.each(data.items,function(i, item){
var pid = item.contentDetails.relatedPlaylists.uploads;
//console.log(pid);
getVids(pid);
});
}
);
//var pid="10thStreetPreschool";
// function getvids(pid){
// $.get("https://www.googleapis.com/youtube/v3/playlistItems",{
// part: 'snippet',
// maxResults: 10,
// playlistId:pid,
// key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
// function(data){
// var output;
// $.each(data.items,function(i, item){
// console.log(data);
// var v_id = item.snippet.resourceId.videoId;
// //alert(item.snippet.resourceId.videoId);
// //var video_title = item.snippet.title;
// //output= '<li>'+video_title+'</li>';
// $.get("item.html",function(data){
// $('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId,"description":item.snippet.description}]));
// getcount(v_id);
// });
// //$('#results').append(output);
// });
// }
// );
// }
function getVids(pid, pageToken){
var data = {
part: 'snippet',
maxResults: 10,
playlistId: pid,
key: 'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'
}
try{
if(pageToken){
data["pageToken"] = pageToken;
}
}catch(err){
}
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems", data,
function(data){
var output;
$('#results').html("");
$.each(data.items,function(i, item){
console.log(data);
var v_id = item.snippet.resourceId.videoId;
// var total_results =data.pageInfo.totalResults;
// console.log(total_results);
$.get("item.html",function(data){
$('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId,"description":item.snippet.description}]));
getcount(v_id);
});
//$('#results').append(output);
});
$('#page').html("");
try{
if(data.prevPageToken){
$("#page").append('<span><a class="anc" href="javascript:void(0);" onclick="getVids(\'' + pid + '\', \'' + data.prevPageToken + '\');">« Previous<a/></span>');
}
}catch(err){
}
try{
if(data.nextPageToken){
$("#page").append('<span><a class="anc" href="javascript:void(0);" onclick="getVids(\'' + pid + '\', \'' + data.nextPageToken + '\');">Next »<a/></span>');
}
}catch(err){
}
});
}
function getcount(v_id){
$.get("https://www.googleapis.com/youtube/v3/videos",{
part: 'statistics',
id: v_id,
key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
function(data){
$.each(data.items,function(i, item){
var views = item.statistics.viewCount;
//console.log(views);
$('#'+v_id).append(views);
});
}
);
}
});
function getVids(pid, pageToken){
var data = {
part: 'snippet',
maxResults: 10,
playlistId: pid,
key: 'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'
}
try{
if(pageToken){
data["pageToken"] = pageToken;
}
}catch(err){
}
$.get(
"https://www.googleapis.com/youtube/v3/playlistItems", data,
function(data){
var output;
$('#results').html("");
$.each(data.items,function(i, item){
console.log(data);
var v_id = item.snippet.resourceId.videoId;
//alert(item.snippet.resourceId.videoId);
//var video_title = item.snippet.title;
//output= '<li>'+video_title+'</li>';
$.get("item.html",function(data){
$('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId,"description":item.snippet.description}]));
getcount(v_id);
});
//$('#results').append(output);
});
$('#page').html("");
try{
if(data.prevPageToken){
$("#page").append('<span><a class="anc" href="javascript:void(0);" onclick="getVids(\'' + pid + '\', \'' + data.prevPageToken + '\');">« Previous<a/></span>');
}
}catch(err){
}
try{
if(data.nextPageToken){
$("#page").append('<span><a class="anc" href="javascript:void(0);" onclick="getVids(\'' + pid + '\', \'' + data.nextPageToken + '\');">Next »<a/></span>');
}
}catch(err){
}
});
}
function getcount(v_id){
$.get("https://www.googleapis.com/youtube/v3/videos",{
part: 'statistics',
id: v_id,
key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
function(data){
$.each(data.items,function(i, item){
var views = item.statistics.viewCount;
console.log(views);
$('#'+v_id).append(views);
});
}
);
}
item.html file
<div class="item" style="padding-bottom: 30px;">
<iframe id="player{{videoid}}" class="yt_players" src="http://www.youtube.com/embed/{{videoid}}?rel=0&enablejsapi=1;showinfo=0;&wmode=Opaque" width="560" height="315" frameborder="0" allowfullscreen></iframe>
<div style="margin-bottom: -22px;margin-top: -20px;"><h2 style="font-size:18px;">{{title}}</h2></div>
<div style="margin-bottom: -18px;"><h5 style="font-size:16px;">{{description}}</h5> </div>
<div><h5 style="font-size:14px;margin-top: -5px;">Total Views: <span id="{{videoid}}"></span></h5> </div>
</div>