Get IMDB info using JavaScript - javascript

I am trying to get IMDB info using JavaScript. The following code is working for Title, Year, IMDB link but when I am trying to get "Runtime", "Director", "Released" etc I am getting as undefined. Please help!
This is the data formate: https://www.omdbapi.com/?i=tt4779682&apikey=ba1f4581
Code:
var data;
function getanswer(q){
$.get("https://www.omdbapi.com/?s="+q+"&apikey=ba1f4581", function(rawdata){
var rawstring =JSON.stringify(rawdata);
data =JSON.parse(rawstring);
var title = data.Search[0].Title;
var year = data.Search[0].Year;
var director = data.Search[0].Director;
var imdburl="https://www.imdb.com/title/"+data.Search[0].imdbID+"/";
var posterurl =data.Search[0].Poster;
document.getElementById('answer').innerHTML="<h1>"+title+"</h1><br> <img src= '"+posterurl+"'><br><p> Year Released:"+year+"</p> <br><p> Year Released:"+director+"</p> <br> <p> IMDB page: <a href='"+imdburl+"'target='_blank'>"+imdburl+"</a></p>"; }); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<head></head>
<body onload="getanswer(document.getElementById('querybox').value)">
<!doctype html> <input value="The Meg" onkeyup="getanswer(document.getElementById('querybox').value)" id="querybox"> <div id="answer"></div>
</body>
</html>

According to the api documentation, you were using s parameter that would not return Runtime/Director/etc. You could use the t parameter and remove Search[0].
Below is the code that would work:
var data;
function getanswer(q){
$.get("https://www.omdbapi.com/?t="+q+"&apikey=ba1f4581", function(rawdata){
var rawstring =JSON.stringify(rawdata);
data =JSON.parse(rawstring);
console.log(data);
var title = data.Title;
var year = data.Year;
var director = data.Director;
var imdburl="https://www.imdb.com/title/"+data.imdbID+"/";
var posterurl =data.Poster;
document.getElementById('answer').innerHTML="<h1>"+title+"</h1><br> <img src= '"+posterurl+"'><br><p> Year Released:"+year+"</p> <br><p> Year Released:"+director+"</p> <br> <p> IMDB page: <a href='"+imdburl+"'target='_blank'>"+imdburl+"</a></p>"; }); }

Related

JavaScript not changing DOM in my HTML Template after load in Apps Script

I am trying to build a simple dashboard where if user access their dashboard it will show data from the google spreadsheet. But There is one problem I don't know why only my first div is getting target via JavaScript not the second one..
any Help and solution would apricated..
Why My Second Line Targeting div id="load1" is not executing ????
Code.gs
`function loadDetails(id){
var ss = SpreadsheetApp.openById("14RM_170AefKbQq82NXAdSOemQLyAGcv_BTwYWd1-qtM")
var ws = ss.getSheetByName("Data")
var data = ws.getDataRange().getValues()
for(var i=0; i<data.length; i++){
var row = data[i]
if(row[0]== id){
password = {
psd: row[1],
id: row[0]
}
}
}
if(row[0]!= id){
password = "not found"
}
return password;
}`
Dashboard.HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Hey this is other Employee Dashboard</h1>
<p>Your Employee Id: = </p>
<p>Your Password : = </P>
<div id="load">
<div>
<div id="load1">
<div>
<script>
window.onload = function(){
var id = "MN00018"
google.script.run.withSuccessHandler(function(output){
document.getElementById("load").innerHTML = `passing objects are ${output.psd} & ${output.id}`
document.getElementById("load1").innerHTML = `passing objects are ${output.id}`
}).loadDetails(id)
}
</script>
</body>
</html>
If you are actually testing your showing script, I think that there are 2 modification points.
HTML & Javascript side:
The tag of div is not enclosed. How about modifying as follows?
From:
<div id="load">
<div>
<div id="load1">
<div>
To:
<div id="load">
</div>
<div id="load1">
</div>
I think that this is the reason of your issue of Why My Second Line Targeting div id="load1" is not executing ????.
Google Apps Script side:
At Google Apps Script side, by if(row[0]!= id){password = "not found"}, even when id is found from the column "A", "not found" is returned. How about modifying as follows?
Modified script:
function loadDetails(id) {
var ss = SpreadsheetApp.openById("###");
var ws = ss.getSheetByName("Data")
var data = ws.getDataRange().getValues()
var password = {psd: "", id: ""};
for (var i = 0; i < data.length; i++) {
var row = data[i]
if (row[0] == id) {
password = {
psd: row[1],
id: row[0]
}
break;
}
}
return password;
}

try to parse value in javascript

i want to parse this value, but i got error
i want to get URL like this :
http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/2019-01-08/dan/17
but i tried and got like this :
http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/[object%20HTMLLabelElement]/dan/17
i tried with this code :
// var label = $(this).attr("data");
// var label = document.getElementById("data").value = ""+data;
this is my blade view :
<html>
<head><title></title></head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/gijgo#1.9.11/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.11/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<body>
<ul></ul>
<label id="data" name="data" style="display: none;"></label>
<input type="text" id="datepicker" name="datepicker" value="Date"/> <br>
<script>
$('#datepicker').datepicker({
format : 'yyyy-mm-dd'
});
</script>
<button>test</button>
<script src="js/test.js" type="text/javascript"></script>
</body>
</html>
this is my js :
$("button").click( function() {
// var label = $(this).attr("data");
// var label = document.getElementById("data").value = ""+data;
var test = data;
var label = JSON.stringify(test);
//i want get url like this
//http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/2019-01-08/dan/17
$.getJSON( "http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/"+label+"/dan/17", function(obj) {
$.each(obj, function(key, value) {
$("ul").append(value.hariPraktek);
});
});
});
someone can help me? :(
very thanks if someone want to help me :)
What you actually want is the datepicker value using var label = $('#datepicker').datepicker('getDate');

JavaScript Appending to a Document

The goal is to be able to click on one of the items and see the description and cost below it. This should be done dynamically. Here is what I have so far:
<!DOCTYPE HTML>
<html>
<head> Assignment 4B
<div id="first" onclick="displayFirst()"> Cleanser </div>
<div id ="second" onclick="displaySecond()"> Exfoliator </div>
<div id ="third" onclick="displayThird()"> Toner </div>
<div id ="fourth" onclick="displayFourth()"> Moisturizer </div>
</head>
<body>
<script type = "text/javascript">
function displayFirst()
{
var d1=document.getElementByID("first");
var text=document.createTextNode("description: will cleanse the face and cost: $20");
d1.appendChild(text);
}
var d2 = document.getElementByID("second");
function displaySecond()
{
var d2=document.getElementByID("second");
var text=document.createTextNode("description: will exfoliate the face and cost: $30");
d1.appendChild(text);
}
var d3 = document.getElementByID("third");
function displayThird()
{
var d1=document.getElementByID("first");
var text=document.createTextNode("description: will toner the face and cost: $15");
d1.appendChild(text);
}
var d4 = document.getElementByID("fourth");
function displayFourth()
{
var d1=document.getElementByID("first");
var text=document.createTextNode("description: will moisturize the face and cost: $50");
d1.appendChild(text);
}
</script>
</body>
</html>
I am able to create the textNode and append it but when I click on the actual item nothing happens. I am not sure if I need to print something out inside each function to get it to display.

How to use an element property to pass a variable from Javascript

I'm attempting to send emails using an HTML template.
I've looked at this post:
(https://stackoverflow.com/questions/33178702/passing-variables-into-html-code)
Would either of the two code examples be close to something that could work to pass the variables from the Javascript to the HTML template?
My javascript variables are named detail2, detail3, detail4, detail5 and detail6.
1st attempt:
<html>
<head>
<script>
{
var detail2 = document.getElementById("detail2").innerHTML;
var detail3 = document.getElementById("detail3").innerHTML;
var detail4 = document.getElementById("detail4").innerHTML;
var detail5 = document.getElementById("detail5").innerHTML;
var detail6 = document.getElementById("detail6").innerHTML;
}
}
</script>
</head>
<body>
<p>
<br>"Punctual? " document.getElementById('detail2').value<br>
<br>"Attention to detail? " document.getElementById('detail3').value<br>
<br>"Overall Professionalism? " document.getElementById('detail4').value<br>
<br>"Date of Service: " document.getElementById('detail5').value<br>
<br>"Notes/Details: " document.getElementById('detail6').value<br>
</p>
</body>
</html>
2nd attempt:
<html>
<head>
<script>
{
<input type="hidden" id="Detail2" value="detail2" />
<input type="hidden" id="Detail3" value="detail3" />
<input type="hidden" id="Detail4" value="detail4" />
<input type="hidden" id="Detail5" value="detail5" />
<input type="hidden" id="Detail6" value="detail6" />
}
}
</script>
</head>
<body>
<p>
<br>"Punctual? " document.getElementById('detail2').value<br>
<br>"Attention to detail? " document.getElementById('detail3').value<br>
<br>"Overall Professionalism? " document.getElementById('detail4').value<br>
<br>"Date of Service: " document.getElementById('detail5').value<br>
<br>"Notes/Details: " document.getElementById('detail6').value<br>
</p>
</body>
</html>
Finally, the method given on GAS Dev is below, but this only confuses me more. I am sure I've been at this too long and I'm burned out, I just can't seem to see the answer on this one.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</body>
</html>
If anyone can help it's much appreciated!
Below is the Javascript from the .gs script file.
function SendEmail() {
// initialize data
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getActiveSheet();
var range = sheet.getDataRange();
var values = range.getValues();
// iteration loop
for (var i = 1; i<values.length; i++) {
// current times for comparator
var month = new Date().getMonth(); // returns today as 0-11 -- Jan is 0
var day = new Date().getDate(); // returns today as 1-31
var hour = new Date().getHours(); // returns today as 0-23
var minute = new Date().getMinutes(); // returns today as 0-59
// pull data from spreadsheet rows
var company = values[i][0];
var rating = values[i][1];
var detail1 = values[i][2];
var detail2 = values[i][3];
var detail3 = values[i][4];
var detail4 = values[i][5];
var detail5 = values[i][6];
var sendTime = values[i][7];
// character send times for comparator
var cSendMonth = sendTime.getMonth(); // returns sendMonth as 0-11 -- Jan is 0
var cSendDay = sendTime.getDate(); // returns sendDay as 1-31
var cSendHour = sendTime.getHours(); // returns sendHour as 0-23
var cSendMinute = sendTime.getMinutes(); // returns sendMinute as 0-59
// comparator
if(cSendMonth == month) {
if(cSendDay == day) {
if(cSendHour == hour) {
if(cSendMinute == minute) {
var htmlBody = HtmlService.createHtmlOutputFromFile('mail_template').getContent();
MailApp.sendEmail({
to: Session.getActiveUser().getEmail(),
subject: 'Test Email markup2 - ' + new Date(),
htmlBody: htmlBody,
});
} // end if minute test
}// end if hour test
}// end if day test
}// end if month test
}// end for loop
}
Can you try:
<html>
<head>
<script>
(function() {
var detail2 = document.getElementById("detail2").innerHTML;
document.getElementById("detail2_val").innerHTML = detail2;
})();
</script>
</head>
<body>
<p>
<br>"Punctual?" <span id="detail2_val"></span><br>
</p>
</body>
</html>
Currently, this line:
var htmlBody = HtmlService.createHtmlOutputFromFile('mail_template').getContent();
will not evaluate a template.
The method being used is:
createHtmlOutputFromFile('mail_template')
HtmlService has quite a few methods for creating html content. You need to use:
HtmlService.createTemplateFromFile(filename).evaluate()
There are some possible things that could go wrong in your overall work flow. If the situation is one in which you are writing data, and then immediately trying to read that same data that was just written, there could be a problem with the new data not being available to be read in such a short time span.
I would use:
SpreadsheetApp.flush();
immediately after writing the new data, and before creating the template.
Only your third html example has code for a template. To retrieve data and put it into a template, a scriptlet must either run a function, that then retrieves the data, or the data must be in global variables. The situation with global variable makes no sense, because you are using dynamic data, so a function would need to run to first put the data into a global variable. The function might as well just return the data directly. So, your scriptlet will probably need to run a server side function and return text or HTML to the html template. You probably need to use a printing scriptlet.
Apps Script documentation - force printing scriptlets

How to populate updated time in other text box based on time entered in one text box using java script or JQuery

Need your help here again.
I don't have any code snippet for this.
Below is my problem description:
There are two text boxes .
In one text box user will enter any time in 24 hour format say 23:23 or 10:12..
Now I need to populate time in the second text box based on this entered time.
Second text box should display value after adding the 6 hours in 24 hours format to the entered time.i.e. should display 05:23 or 16:12 and so on.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function() {
$('#new_one').on('change',function (e) {
var first_time = $(this).val();
var arr = first_time.split(':');
var hrs = arr[0];
var new_hrs = parseInt(hrs)+6;
if(new_hrs>24)
new_hrs = new_hrs-24;
if(new_hrs < 10)
new_hrs = '0'+new_hrs;
var second_time = new_hrs+':'+arr[1];
$('#new_two').val(second_time);
});
});
</script>
</head>
<body>
Text1<input type="text" id="new_one"><br/>
Text2<input type="text" id="new_two">
</body>
</html>
Here is the working fiddle : Working Fiddle
$('#one').on('change',function (e) {
var first_time = $(this).val();
var arr = first_time.split(':');
var hrs = arr[0];
var new_hrs = parseInt(hrs)+6;
if(new_hrs>24)
new_hrs = new_hrs-24;
if(new_hrs < 10)
new_hrs = '0'+new_hrs;
var second_time = new_hrs+':'+arr[1];
$('#two').val(second_time);
});
It is pretty basic just split the input string of first box on ':' using .split(':') and increment hours accordingly and put the computed value to second box
$(document).ready(function()
{
$("#firstTime").keypress(function(){
var firsttime = $(this).val();
var gettime = $.trim(firsttime).split(":");
var updatetime = parseInt(gettime [0])+6;
if(updatetime > 24)
{
updatetime = updatetime-24;
}
if(updatetime < 10)
{
updatetime = "0"+updatetime;
}
$("#secondtime").val(updatetime+":"+gettime [1]);
});
});
Where your HTML will be:
<input type="text" id="firsttime"><!-- first time -->
<input type="text" id="secondtime"><!-- second time -->
You can also leverage DateJS to simplify the calculation as listed below. Here's an example in JS Fiddle. Note, there's no validation checks and number of hours to add is hard-coded at 6.
<!DOCTYPE html>
<html>
<head>
<title>Time Sample</title>
</head>
<body>
Start Time: <input id="startTime" type="text" /><br />
End Time: <input id="endTime" type="text" />
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/date.js"></script>
<script>
$(function () {
$("#startTime").change(function () {
var endTime = Date.parse(this.value).add(6).hours();
$("#endTime").val(endTime.toString("H:mm"));
});
});
</script>
</body>
</html>

Categories

Resources