I currently have a piece of code that only displays the current weather in a given zipcode. Can someone help me with getting a 5 day forecast. Here is what I have so far.
var loc = zipcode;
var u = 'f';
var query = "SELECT item.condition FROM weather.forecast WHERE location='" + loc + "' AND u='" + u + "'";
var cacheBuster = Math.floor((new Date().getTime()) / 1200 / 1000);
var url = '<http://query.yahooapis.com/v1/public/yql?q=>' + encodeURIComponent(query) + '&format=json&_nocache=' + cacheBuster;
window['wxCallback'] = function(data) {
var info = data.query.results.channel.item.condition;
$('#wxIcon').css({
backgroundPosition: '-' + (61 * info.code) + 'px 0'
}).attr({
title: info.text
});
$('#wxIcon2').append('<img src="<http://l.yimg.com/a/i/us/we/52/>' + info.code + '.gif" width="34" height="34" title="' + info.text + '" />');
$('#wxTemp').html(info.temp + '°' + (u.toUpperCase()));
};
$.ajax({
url: url,
dataType: 'jsonp',
cache: true,
jsonpCallback: 'wxCallback'
});
and here is the YQL console. LINK
I found forecast but I don't know how to implement it. I'm pretty new when it comes to YQL... Thanks!
I have posted a complete sample here - https://gist.github.com/mvark/5231461
Check the Yahoo Weather API documentation for more details about the API
Related
I'm finishing my first project where I POST data to a server and then retrieve it in the form of a list on a separate page. I have gotten to the point where I can now post and retrieve the data, however I'm getting this error:
Uncaught RangeError: Maximum call stack size exceeded
at renderSearchResults (menu.js:8)
at renderSearchResults (menu.js:38)
My code is below. Any help would be appreciated.
var userInfo = JSON.parse(sessionStorage.getItem('user'));
function search() {
/* var userInfo = JSON.parse(sessionStorage.getItem('user')); */
var xhr = new XMLHttpRequest();
xhr.open('GET', (`https://ict4510.herokuapp.com/api/menus?api_key=${userInfo.user.api_key}` ));
xhr.onload = function renderSearchResults() {
if (this.status == 200) {
var menuInfo = JSON.parse(this.responseText);
var output = '';
for (var i in menuInfo.menu) {
output +=
'<div class="foodItems">' +
'<ul>' +
'<li>Food Item: ' + menuInfo.menu[i].item + '</li>' +
'<li>Description: ' + menuInfo.menu[i].description + '</li>' +
'<li> Price: ' + menuInfo.menu[i].price + '</li>' +
'</ul>' +
+
'</div>';
}
console.log(output);
document.getElementById('foods').innerHTML = output;
}
renderSearchResults();
}
xhr.send();
}
search();
I'm upgrading my Ionic 3 app to Ionic 4.
I'm working google maps and markers. I added few buttons in infoWindow and declared an attirbute data-id. Now I want to get these buttons using this attribute data-id
Here's the related code:
let content = '<b>' + locations[i].name + '</b><br/>' + locations[i].street + "<br/>";
content += "<button id='edit-customer-" + i + "' class='edit-customer button button-md button-default-secondary button-default-md' ion-button data-id='" + locations[i].id + "'>Editar</button>";
content += "<button id='order-customer-" + i + "' class='order-customer button button-md button-default-secondary button-default-md' ion-button data-id='" + locations[i].id + "'>Pedido</button>";
content += "<button id='event-customer-" + i + "' class='event-customer button button-md button-default-secondary button-default-md' ion-button data-id='" + locations[i].id + "'>Evento</button>";
infowindow.setContent(content);
google.maps.event.addListenerOnce(infowindow, 'domready', () => {
let infoWindow = infowindow;
document.getElementById('edit-customer-' + i).addEventListener('click', (event) => {
var targetElement = (<HTMLButtonElement>event.target || event.srcElement);
var id = targetElement.getAttribute("data-id"); //getAttribute shows syntax error 'Property "getAttribute" does not exist on type "EventTarget"'
infoWindow.close();
me.editCustomer(id);
});
});
var id = targetElement.getAttribute("data-id");
syntax error 'Property getAttribute does not exist on type EventTarget'
Am I doing something wrong?
Any alternate way to getAttribute?
I have the following highcharts graph
https://jsfiddle.net/deemgfay/
and I am trying to display the "Consum Test" values in the tooltip but without adding them to the series. I just want to add Consum (l/100km)
Total Consum (l) to the series. Is that possible with hightcharts? Please see the screenshot below.
You can set the extra series to be hidden and ignored in legend:
visible: false,
showInLegend: false
Then use tooltip formatter function (useHTML must be enabled) to display points from all series in the shared tooltip regardless of their visibility:
formatter: function() {
var html,
originalPoint = this.points[0];
// header
html = "<span style='font-size: 10px'>" + originalPoint.x + "</span><br/>";
// points
originalPoint.series.chart.series.forEach(function(series) {
var point = series.points.find((p) => p.x === originalPoint.point.x);
html += "<span style='color: " + series.color + "'>\u25CF</span> " + series.name + ": <b>" + point.y + "</b><br/>"
});
return html;
}
Live demo: https://jsfiddle.net/kkulig/1oggzsx0/
API references:
http://api.highcharts.com/highcharts/tooltip.formatter
http://api.highcharts.com/highcharts/tooltip.useHTML
This can be done by using tooltip.formatter. Here I append to tooltip info based on index of current series from index of required extra array.
formatter: function() {
var s = '<b>' + this.x + '</b>';
var reqpoint = 0;
$.each(this.points, function() {
var reqpoint = this.point.index
s += '<br/>' + this.series.name + ': ' +
this.y.toFixed(2) + 'm';
if (this.series.index == 1) {
s += '<br/>Test Consum (l): ' + extraData[reqpoint] + 'm';
}
});
return s;
},
Fiddle demo
I want to get all videos of a single channel that i have its Id. The problem that I am getting only the channel informations.
this is the link that I am using:
https://gdata.youtube.com/feeds/api/users/UCdCiB_pNQpR0M_KkDG4Dz5A?v=2&alt=json&q=goal&orderby=published&max-results=10
That link is for the now-retired V2 API, so it will not return any data. Instead, you'll want to use V3 of the API. The first thing you'll need to do is register for an API key -- you can do this by creating a project at console.developers.google.com, setting the YouTube data API to "on," and creating a public access key.
Since you have your user channel ID already, you can jump right into getting the videos from it; note, however, that if you ever don't know the channel ID, you can get it this way:
https://www.googleapis.com/youtube/v3/channels?part=snippet&forUsername={username}&key={YOUR_API_KEY}
With the channel ID, you can get all the videos from the channel with the search endpoint, like this:
https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId={channel id here}&maxResults=25&key={YOUR_API_KEY}
In this case, ordering by date is the same as the old V2 parameter for ordering by "published."
There are also a lot of other parameters you can use to retrieve videos while searching a channel; see https://developers.google.com/youtube/v3/docs/search/list for more details.
I thought I would share my final result using JavaScript. It uses the Google YouTube API key and UserName to get the channel ID, then pulls the videos and displays in a list to a given div tag.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YouTube Channel Listing</title>
<script type="text/javascript">
function getJSONData(yourUrl) {
var Httpreq = new XMLHttpRequest();
try {
Httpreq.open("GET", yourUrl, false);
Httpreq.send(null);
} catch (ex) {
alert(ex.message);
}
return Httpreq.responseText;
}
function showVideoList(username, writediv, maxnumbervideos, apikey) {
try {
document.getElementById(writediv).innerHTML = "";
var keyinfo = JSON.parse(getJSONData("https://www.googleapis.com/youtube/v3/channels?part=snippet&forUsername=" + username + "&key=" + apikey));
var userid = keyinfo.items[0].id;
var channeltitle = keyinfo.items[0].snippet.title;
var channeldescription = keyinfo.items[0].snippet.description;
var channelthumbnail = keyinfo.items[0].snippet.thumbnails.default.url; // default, medium or high
//channel header
document.getElementById(writediv).innerHTML += "<div style='width:100%;min-height:90px;'>"
+ "<a href='https://www.youtube.com/user/" + username + "' target='_blank'>"
+ "<img src='" + channelthumbnail + "' style='border:none;float:left;margin-right:10px;' alt='" + channeltitle + "' title='" + channeltitle + "' /></a>"
+ "<div style='width:100%;text-align:center;'><h1><a href='https://www.youtube.com/user/" + username + "' target='_blank'>" + channeltitle + "</a></h1>" + channeldescription + "</div>"
+ "</div>";
var videoinfo = JSON.parse(getJSONData("https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId=" + userid + "&maxResults=" + maxnumbervideos + "&key=" + apikey));
var videos = videoinfo.items;
var videocount = videoinfo.pageInfo.totalResults;
// video listing
for (var i = 0; i < videos.length; i++) {
var videoid = videos[i].id.videoId;
var videotitle = videos[i].snippet.title;
var videodescription = videos[i].snippet.description;
var videodate = videos[i].snippet.publishedAt; // date time published
var videothumbnail = videos[i].snippet.thumbnails.default.url; // default, medium or high
document.getElementById(writediv).innerHTML += "<hr /><div style='width:100%;min-height:90px;'>"
+ "<a href='https://www.youtube.com/watch?v=" + videoid + "' target='_blank'>"
+ "<img src='" + videothumbnail + "' style='border:none;float:left;margin-right:10px;' alt='" + videotitle + "' title='" + videotitle + "' /></a>"
+ "<h3><a href='https://www.youtube.com/watch?v=" + videoid + "' target='_blank'>" + videotitle + "</a></h3>" + videodescription + ""
+ "</div>";
}
} catch (ex) {
alert(ex.message);
}
}
</script>
</head>
<body>
<div id="videos"></div>
<script type="text/javascript">
showVideoList("USER_NAME", "videos", 25, "YOUR_API_KEY");
</script>
</body>
</html>
ADDITION - I also wrote a function to handle if you are using a channel ID instead of a UserName based account.
Here is that code:
function showVideoListChannel(channelid, writediv, maxnumbervideos, apikey) {
try {
document.getElementById(writediv).innerHTML = "";
var vid = getJSONData("https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId=" + channelid + "&maxResults=" + (maxnumbervideos + 1) + "&key=" + apikey);
var videoinfo = JSON.parse(vid);
var videos = videoinfo.items;
var videocount = videoinfo.pageInfo.totalResults;
var content = "<div style='height:600px;overflow-y:auto;'>";
for (var i = 0; i < videos.length - 1; i++) {
var videoid = videos[i].id.videoId;
var videotitle = videos[i].snippet.title;
var videodescription = videos[i].snippet.description;
var videodate = videos[i].snippet.publishedAt; // date time published
var newdate = new Date(Date.parse((videodate + " (ISO 8601)").replace(/ *\(.*\)/, "")));
var min = newdate.getMinutes();
if (min < 10) {
min = "0" + min;
}
if (newdate.getHours() > 12) {
newdate = newdate.getMonth() + 1 + "/" + newdate.getDate() + "/" + newdate.getFullYear() + " " + (newdate.getHours() - 12) + ":" + min + " PM";
} else if (newdate.getHours() == 12) {
newdate = newdate.getMonth() + 1 + "/" + newdate.getDate() + "/" + newdate.getFullYear() + " " + newdate.getHours() + ":" + min + " PM";
} else {
newdate = newdate.getMonth() + 1 + "/" + newdate.getDate() + "/" + newdate.getFullYear() + " " + newdate.getHours() + ":" + min + " AM";
}
var videothumbnail = videos[i].snippet.thumbnails.default.url; // default, medium or high
content += "<hr /><div style='width:100%;min-height:90px;'>"
+ "<a href='https://www.youtube.com/watch?v=" + videoid + "' target='_blank'>"
+ "<img src='" + videothumbnail + "' style='border:none;float:left;margin-right:10px;' alt='" + videotitle + "' title='" + videotitle + "' /></a>"
+ "<h3><a href='https://www.youtube.com/watch?v=" + videoid + "' target='_blank'>" + videotitle + "</a></h3>" + videodescription + "<br />"
+ "<span style='color:#738AAD;font-size:Small;'>" + newdate + "</span>"
+ "</div>";
}
content += "</div>";
document.getElementById(writediv).innerHTML = content;
} catch (ex) {
alert(ex.message);
}
}
It is very easy method to get channel videos using your channel API key:
Step 1: You must have an YouTube account.
Step 2: Create your YouTube channel API key
Step 3: Create project console.developers.google.com,
<?php
$API_key = 'Your API key'; //my API key dei;
$channelID = 'Your Channel ID'; //my channel ID
$maxResults = 5;
$video_list =
json_decode(file_get_contents('https://www.googleapis.com/youtube/v3/search?
order=date&part=snippet&channelId='.$channelID.
'&maxResults='.$maxResults.'&key='.$API_key.''));
?>
Example : https://www.googleapis.com/youtube/v3/channelspart=snippet&forUsername=
{username}&key={YOUR_API_KEY}
Here is the way to get all videos with only 2 quotas using YouTube Data API (v3)
First of all do a list on channels with part=contentDetails (1 quota) :
https://youtube.googleapis.com/youtube/v3/channels?part=contentDetails&id=[CHANNEL_ID]&key=[YOUR_API_KEY]
You will get this result :
{
...
"items": [
{
...
"contentDetails": {
"relatedPlaylists": {
"likes": "",
"uploads": "UPLOADS_PLAYLIST_ID"
}
}
}
]
}
Then take UPLOADS_PLAYLIST_ID and do a list on playlistItems with part=contentDetails (1 quota):
https://youtube.googleapis.com/youtube/v3/playlistItems?part=contentDetails&playlistId=[UPLOADS_PLAYLIST_ID]&key=[YOUR_API_KEY]
You will get this result:
{
...
"items": [
{
...
"contentDetails": {
"videoId": "VIDEO_ID",
"videoPublishedAt": "2022-10-27T16:00:08Z"
}
},
...
],
"pageInfo": {
"totalResults": 5648,
"resultsPerPage": 5
}
}
You got the list of the videos under items
You can of course change the size of this list by adding maxResults=50 (max value is 50)
My App using fusiontable to select records id by ST_INTERSECTS working fine before suddenly not work now!
var queryText = encodeURIComponent("select id from "+ v_TableID +" where ST_INTERSECTS(address, CIRCLE(LATLNG(" + lat + ',' + lng + '),' + 1000 + '))' + "and" + v_select + "and id > 1" );
var query = new google.visualization.Query("http://www.google.com/fusiontables/gvizdata?tq=" + queryText);
If removed ST_INTERSECTS(address, CIRCLE(LATLNG(" + lat + ',' + lng + '),' + 1000 + '))it work fine
var queryText = encodeURIComponent("select id from "+ v_TableID +" where " + v_select + "and id > 1");
var query = new google.visualization.Query("http://www.google.com/fusiontables/gvizdata?tq=" + queryText);
if i modify fusion table address(eg: 22.2202,113.9196 change to 22.22,113.919) it work again but only the first time.
Additional information
var v_select = 'category in ("abc","xyz")';
i try again than find out
var queryText = encodeURIComponent("select id from "+ v_TableID +" where ST_INTERSECTS(address, CIRCLE(LATLNG(" + lat + ',' + lng + '),' + 1000 + '))' + "and" + 'category in ("abc","xyz")' + "and id > 1" );
var query = new google.visualization.Query("http://www.google.com/fusiontables/gvizdata?tq=" + queryText);
if i remove "category in ("abc","xyz")" OR "ST_INTERSECTS(address, CIRCLE(LATLNG(" + lat + ',' + lng + ')" work fine.
Is it not allow to use "in" and "ST_INTERSECTS" together now?
Before 28/10/2012 it work fine i use the same clause already 6 months but now not work.
Please help
I appreciate that this isn't an answer (I don't have enough rep to make a comment) but it might help in solving this problem - I am having a similar problem with an almost identical query which has worked for a while. It seems to be because of the switch from Numeric tableID's to encrypted tableID's - that's the only difference in my two versions of code. Is the poster using encrypted table ID's? Working to try and fix this with no luck so far...