Trying to use youtube api on html page - javascript

Here is my code:
<!DOCTYPE html>
<html lang="en" >
<head>
<script type="text/javascript">
function showResponse(response){
var responseString = JSON.stringify(response, '', 2);
document.getElementById('response').innerHTML += responseString;
}
function onClientLoad(){
gapi.client.load('youtube','v3', onYouTubeApiLoad);
}
function onYouTubeApiLoad(){
gapi.client.setApiKey('MyActualKey');
search();
}
function search(){
var request = gapi.client.youtube.search.list({
part: 'snippet'
});
request.execute(onSearchResponse);
}
function onSearchResponse(response){
showResponse(response);
}
</script>
<title></title>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>
</head>
<body>
<div id="response"></div>
</body>
</html>
This code is from Codecademy, and I thought I can use it on an html page and it would work.
I got an API key from google and I set my Youtube data api v3 setting to enabled in my google developers console, but this code gives me a blank page.
What am I doing wrong?

There are a few missing pieces, code snippets which codecademy likely took for granted but which are essential when placing it in your own server outside of their app. First of all, you need a line that actually loads the gapi library from google. You can put this in your code, just before the closing :
<script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>
In short, this will get the library from Google's servers, and when it's loaded the library will automatically call your onClientLoad method, kicking off your app.
Next, you say you have an API key; make sure you put that key into your code by replacing this:
gapi.client.setApiKey('MyKey');
with this:
gapi.client.setApiKey('{WHATEVER_YOUR_ACTUAL_KEY IS');
Finally, as the commenters mentioned, your body is empty, so when your code executes the showResponse method there's no place to put what comes back. Add this:
<div id="response"></div>

Related

Amplify.js publish subscribe not working when publish and subscribe are in two separate files

I am trying to get Amplify.js publish/subscribe to work with 2 files.
I can get it to work when the code is is one file, but not when publish is
in one file and subscribe is in another file.
Here is the code where the call to subscribe and publish are in
the same file. This works.
<html>
<head>
<script type="text/javascript" src="./js/jquery-1.8.2.min.js"> </script>
<script
type="text/javascript" src="./js/amplify-1.1.2/amplify.min.js">
</script>
</head>
<body>
<H1>My amp pub/sub page</H1>
<script type="text/javascript">
alert("entering page");
amplify.subscribe("dataExample", function(param) {
alert("In the amplify.subscribe function,
param is: " + param.foo ); } );
alert("after line amplify.subscribe");
result = amplify.publish("dataExample", { foo: "bar" } );
alert ("After amplify.publish, result is " + result );
</script>
</body>
</html>
The results are it prints out the alerts in the expected
order, like this:
'entering page'
'after line amplify.subscribe'
'In the amplify.subscribe function, param is: bar'
'After amplify.publish, result is true'
When I put the subscribe and publish in separate files,
the amplify.subscribe function will not be invoked. For this
test, I have two browsers up (both Firefox). I run subscribe on one
browser, then publish on the other.
Here is the code for subscribe ( I simply cut out the publish part)
<html>
<head>
<script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./js/amplify-1.1.2/amplify.min.js">
</script>
</head>
<body>
<H1>My amp sub page</H1>
<script type="text/javascript">
alert("entering page");
amplify.subscribe("dataExample", function(param) {
alert("In the amplify.subscribe function, param is: " +
param.foo ); } );
alert("after line amplify.subscribe");
</script>
</body>
</html>
code for publish (I cut out the subscribe part)
<html>
<head>
<script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./js/amplify-1.1.2/amplify.min.js">
</script>
</head>
<body>
<H1>My amp pub page</H1>
<script type="text/javascript">
alert("entering page");
result = amplify.publish("dataExample", { foo: "bar" } );
alert ("After amplify.publish, result is " + result );
</script>
</body>
</html>
I am using firefox version 47.0.1
I have the same problems when I use Chrome.
Does anyone have any ideas on this?
Does anyone have any deeper knowledge on this, like
where is the publish data being stored? for how long?
and how can I see if it is there.
Where is the subscribe looking for the data?
Will the publish subscribe work with two files?
The publish data isn't stored anywhere.
The callback functions are stored. Within normal variables in amplify. You could imagine a map with event names as keys & the callback function as the values.
When you publish with a event name, the callback for that event is retrieved from the map & executed with the data you passed along.
The problem here is that the map is local to every page, just like any other JavaScript variable.
So in the first page only the call back is stored, but there is no code within the same page invoking the event.
In your second page as there is no callback defined, hence there is nothing to handle that event.
So what you're looking for is a way to share the JavaScript variables across pages. A quick search in SO revealed some attempts. I think they ought to help you implement the same:
Global Variable usage on page reload
browser sessionStorage. share between tabs?
How to bind to localStorage change event using jQuery for all browsers?

ReferenceError: SpreadsheetApp is not defined

I get "ReferenceError: SpreadsheetApp is not defined" when i run the above code. Is there any error?
This is working in script editor but not working in separate file
<html>
<head>
<title>Site</title>
</head>
<body>
<p id="demo"></p>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script>
var ss = SpreadsheetApp.openById('1-wYHx2ynT1fMAUKHSeRDBABjE_cAbJ2tfBP_deKjhGs');
document.getElementById("demo").innerHTML =ss.getName();
</script>
</body>
</html>
Take a look at the Google Apps Script tutorials. For the most part, GAS is all server-side scripting, whereas you're trying to gain client-side access to a spreadsheet. It doesn't work like that. You'll need to follow one of the tutorials and open the script editor to begin writing your code.
You need to redirect call function in a way html apps script allows you. Please have a look at simple line below, which permits you to access any function
a file called "lookatme.html"
</script>
function doStuff() {
google.script.run.doStuff()
console.log("ggg")
}
</script>
if it is a .gs extension file unlike html file, it will recognize the code below and any extended apps scripts' built-in functions
a file called "anyfile.gs"
function doStuff() {
console.log("ggg")
// google.script.run.userClicked(userInfo)
var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1i9of_RcoDih65x2h7-agSdCaUSvc1fvfOm4Y7dQEb-s/edit#gid=0")
var ws = ss.getSheetByName("Data")
ws.appendRow(["name"])
}

How to design javascript

I have java script file that reads in a csv file, and has many functions to to visualize the data differently, using d3. I want each visualization to be displayed in different html pages. Ive made every html page, refer to the javascript file. Each page also has its own script that calls functions from the referred javascript file.
The problem, I am facing is that when ever I go to a new page, the function gets called before the data being read. Only works when refreshing the page. I there a way to just read the data in once, and every page can access it.
If you look at the code below, callingFunction() returns undefined (maybe because data is not stored in var data?) The callingFunction() works fine when the page is refreshed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>D3</title>
**<script src="my.js"></script>** //my script file
</head>
<body>
<script>
callFunction(); //uses var data defined in my.js
</script>
Here is the "my.js":
var data;
function data(file){d3.csv("file", function (error, data) {
ds = data;
callFunction();
}
load your script after the target DOM :
<canvas></canvas>
...........................
<script type="text/javascript"></script>
Use angularJs Js library: it organize your js code according to MVC design pattern.
If you have more than one method to implement a business logic , Use console.time & console.timeEnd to evaluate code performance .
console.time('anID');
// Here your code
console.timeEnd('anID');

how to call REST API from javascript

I have a url which gives json data...
I want to hit that URL from javascript but I am getting this error :
character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature
Code :
function a(){
$.getJSON(url,function(data) { alert(data);});
}
full code :
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
<script language="JavaScript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>
function a(){
$.getJSON(url,function(data) { alert(data);});
}
</script>
</head>
<body>
<input type="text"/>
<input type="submit" value="search" onclick="a()"/>
</body>
</html>
Your code seems correct.
Are you making a fully qualified URL call?
If you are making a fully qualified URL call, make sure of the following.
You are calling the same domain(same server). You can not make a
simple JSON call to another domain.
If you want to use a cross domain call, you'll have to use JSONp
Update:
This is not working since it is a cross domain call.
Work around for this
JavaScript
Create a function
function getMyData(data) {
alert(data);
//Do the magic with your data
}
Server side
On server end wrap your data inside function syntax
getMyData("Enter your data here");
JavaScript
Then create a script tag and add a link to your cross-domain page
<script type="text/javascript"
src="cross ref url">
</script>
For reference: wikipedia
EDIT: Another option is Create a proxy on your domain. ie create a page in your domain which internally calls the cross-domain page and return the same data to your Ajax call.

JSONRequest.get unresponsive

I am trying to send get requests to the Google Places API with this code:
<script type="text/javascript" src="json2.js">
var googleQuery;
function load() {
googleQuery = JSONRequest.get(
"https://maps.googleapis.com/maps/api/place/details/json?reference=3af0d044d45cd8587d9a3522bc98a95d4f60c6a8&sensor=true&key=xxxxxxxxxxxxxxxx",
function (googleQuery, value, exception) {
if (value) {
processResponse(value);
}
else {
processError(exception);
}
}
);
}
</script>
And calling the load function in the body onload.
<body onload="load()">
</body>
I am including the src="json2.js" in this <script> instead of in its own <script>, since I was getting a "JSONRequest is undefined" error...but I am still getting a strange "load is undefined" error.
Am I going about this JSON request correctly?
Try:
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript">
var googleQuery;
function load(){
googleQuery = JSONRequest.get(
"https://maps.googleapis.com/maps/api/place/details/json?reference=3af0d044d45cd8587d9a3522bc98a95d4f60c6a8&sensor=true&key=xxxxxxxxxxxxxxxx",
function (googleQuery, value, exception) {
if (value) {
processResponse(value);
} else {
processError(exception);
}
}
);
}
</script>
You can't have JavaScript code inside a script tag which has the src attribute. You should place the inline code on another script tag, otherwise it won't be executed.
Replace the line :
<script type="text/javascript" src="json2.js">
with
<script type="text/javascript" src="json2.js"></script>
<script>
Your JS code is being ignored since you specified an src attribute.
JSONRequest is more so just a proposal which browsers can implement at their will (I think Firefox does).
I'm not sure if there are any libraries that can be script sourced to in order to use JSONRequest, but an alternative is to use flyJSONP (http://alotaiba.github.com/FlyJSONP/#!/demo).
flyJSONP uses YQL (Yahoo Query Language) to do any cross domain post/get, and I highly recommend it (especially for google api's such as oAuth 2.0 and ClientLogin)... and it has a debugger mechanism.
Also, there is jankyPost (http://saunter.org/janky.post/). I have not used it but I'm sure I will and I like its concept. Its kinda clugy, or well... janky... but read about how it works (short paragraph) and you'll love it and want to build you own perhaps.
--Cody

Categories

Resources