Develop Reference

How to add and if condition into an append() with jQuery

I am finishing up a TwitchTV project but have been struggling to figure out how to append some code with jQuery. This code needs to check the API to see if a user is streaming or not, then, depending on if he or she is or not, append information to an already dynamic, jQuery produced html.
Take a look at my JavaScript code. Right now, under the “status” row, you will see each user has info. If the user is offline, I would simply like to have the html read “offline.” If the user is online, I would like it to read "Online: " plus a short description of what the channel is about (the stream information is stored in a variable called “stream,” and the short description is stored in a variable called “statusWhat”).
I’m sorry if that is a bit confusing. I think seeing the code will make things clear: https://codepen.io/JayDevelopment/pen/bMKrLK 1
$(function() {
var twitchers = [
"ESL_SC2",
"OgamingSC2",
"cretetion",
"storbeck",
"habathcx",
"RobotCaleb",
"noobs2ninjas"
];
//FREECODECAMP STREAM INFO AND API CALL
var url =
"https://api.twitch.tv/kraken/streams/freecodecamp?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd";
$.getJSON(url, function(data) {
if (data.stream === null) {
$("#fccStatus").html("OFFLINE");
} else {
$("#fccStatus").html("FreeCodeCamp is ONLINE");
}
$('#fccGame').html()
});
for (var i = 0; i < twitchers.length; i++) {
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/channels/" +
twitchers[i] +
"?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd",
success: function(dataFor) {
$.getJSON(
"https://api.twitch.tv/kraken/streams/" +
dataFor.name +
"?client_id=jjqkn1xu4g4rx7d3e1o5refrmw5bhd").done(function(data2) {
var name = dataFor.name;
var logo = dataFor.logo;
var statusWhat = dataFor.status;
var stream = data2.stream;
$('#info').append('<div class="row block">' +
'<div class="col-sm">' +
'<h1>' + '<img src=' + logo + '>' + '</h1>' +
'</div>' +
'<div class="col-sm">' +
'<h1>' + name + '</h1>' +
'</div>' +
'<div class="col-sm" id="change">' +
'<a href="https://www.twitch.tv/' + name + '"' + ' target="blank">' +
'<h1 id="status">' + stream + ': ' + statusWhat + '</h1>' +
'</a></div></div></div>')
/* if (stream === null) {
$("#status").append('OFFLINE');
} else {
$("#status").append('ONLINE: ' + statusWhat);
} */
}
);
},
error: function(error) {
$("#logo").append('<img src=' + '#' + '>' + "<br>");
$("#name").append('Invalid' + "<br>");
$('#status').append('Not found');
}
});
}
});

You can do it when you assign to the stream variable:
if (data2.stream) {
stream = data2.stream + " ONLINE: " + statusWhat;
} else {
stream = "OFFLINE";
}

Calculate age via JS (ASP.NET MVC)

I have this code to get data from back -end
$('#display').click(function () {
var vacancyId = $("#vacancy").val();
var model = {
vacancyId: vacancyId
};
$.ajax({
url: '#Url.Action("Links", "Questions")',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(model),
type: 'POST',
dataType: 'json',
processData: false,
success: function (data) {
var question2 = data;
for (var i = 0; i <= question2.length - 1; i++) {
var videoHTML = '<div style="width:100%;overflow-y: scroll;background:white;height:72%">' + '<div style="float:left; width:50%;height:296px;border-style:solid;margin-bottom:10px;">' +
'<video style="width:100%;height:290px; object-fit: contain;" controls>';
videoHTML += '<source src="' + document.location.origin + "/uploads/" + question2[i].Linkes + ".webm" + '" type="video/webm">';
videoHTML += '</video>' + '</div>' + '<div style="float:right;width:48%;text-align:center;height:296px;border-style:solid;padding-top:30px;">' + '<div>' + '<b>' + "Ф.И.О: " + '</b>' + '<b>' + question2[i].FIO + '</b>' + '</div>' + '<div>' + '<b>' + "Город: " + '</b>' + '<b>' + question2[i].City + '</b>' + '</div>' + '<div>' + '<b>' + "Город: " + '</b>' + '<b>' + question2[i].Vozrast + '</b>' + '</div>'+'</div>'+'</div>';
$(".videolist").append(videoHTML);
}
}
});
});
This one return date of birthday '<b>' + question2[i].Vozrast + '</b>'
I need to display age.
How I can do this on client-side?

You can do this in server side or client side depend on you.
If you like to do it in client side and Vozrast type is Date, so you can use third libraries to do this e.g. Moment.Js
var years = moment().diff(Vozrast, 'years');
var days = moment().diff(Vozrast, 'days');

I do it like this on client side
var today = new Date();
var yyyy = today.getFullYear();
Get year like this
And get age like this
(yyyy - question2[i].Vozrast)

Issues with fancybox .iframe

I have issues when trying to display a YouTube file using the fancybox iframe. It displays a small frame with a scroller. I have attached a link to the code. I am using the YouTube API to extract the content.
https://jsfiddle.net/Le98zx1s/
jQuery displaying to html
function getOutput (item)
{
var videoId = item.id.videoId;
var title = item.snippet.title;
var description = item.snippet.description;
var thumb = item.snippet.thumbnails.high.url;
var channelTitle = item.snippet.channelTitle;
var videoDate = item.snippet.publishedAt;
var output = '<li>' +
'<div class = "list-left">' +
'<img src="' + thumb + '">' +
'</div>' +
'<div class ="list-right">' +
'<h3><a class="fancybox fancybox.iframe"' + 'href="http://youtube.com/embed/' + videoId + '">' + title + '</a></h3>' +
'<small>By <span class="cTitle">' + channelTitle + '</span> on ' + videoDate + '</small>' +
'<p>' + description+'</p>' +
'</div>' +
'</li>' +
'<div class ="clearfix"></div>' + ' ';
return output;
}

Retrieve Flickr photo title AND description using jQuery

Annoyingly, the FlickrAPI provides the title and description of a photo in two separate methods. I'm having trouble getting the description of an image from Flickr and was wondering if you could highlight the error in my script.
for (var i = 0; i < photos.photo.length; i++) {
var descPhoto = "https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key="+API_KEY+"&photo_id="+photos.photo[i].id+"&format=json&nojsoncallback=1";
var descArr = [];
$.getJSON(descPhoto, function(data) {
var value = data.photo.description._content;
descArr.push(value);
});
link = 'https://farm' + photos.photo[i].farm + '.static.flickr.com/' + photos.photo[i].server + '/' + photos.photo[i].id + '_' + photos.photo[i].secret + '_';
title = this._htmlEscape( photos.photo[i].title );
var lightbox = "lightbox";
listItems +=
'<li ' + 'class="' + liClassNoDots + '">' +
'<a href="' + link + self.options.imageSize + '.jpg" title="' + title + '" class="' + aClassNoDots + '" target="_blank" data-lightbox="' + lightbox + '">' +
<img alt="' + title + '" src="' + link + self.options.thumbnailSize +'.jpg"/>' +
'<div class="hover-box">' +
'<p>' + descArr[i] + '</p>' +
'<button class="box-button view">View larger</button>' +
'<button class="box-button request">Request</button>' +
'</div>';
'</a>' +
'</li>';
}
Getting the title is fine and I've checked by API string calls and they work in the address bar of my browser.
I've used console.log() and the array is printed out correctly and I'm getting the descriptions. However, in each <p> tag the script is returning undefined in each instance.
However, if I run the script through the debugger the parapgraph tags are populated with the descriptions. Can somebody help?!

i think the problem is in following code::
..
$.getJSON(description, function(desc) {
value = desc.photo[ i ].description._content;
});
the service url returns photo object whereas you are using photo array, change to:
..
$.getJSON(description, function(desc) {
value = desc.photo.description._content;
console.log( value );
});

retrieving last key in javascript localstorage

I am doing a uni assignment so please excuse the coplete lack of knowledge here. I have been tasked with creating a web based app for a "client" that requires me to open an invoice after they have completed all the details, so far I have the form working fine, i can save to localstorage without an issue and can even retrieve the information in the format that I want.
The issue is that if i have multiple "orders' than i can only retrieve the first string saved to localstorage and i cannot figure out how to make it display the newest/last one.
The key is an almost randomly generated number derived from the date as we had to assume a large quantity of orders. I have attached the code below so if anyone can help i would appreciate it. Also I cannot use Jquery or JSON or anything like that. We have been told we are not able to use these. Also i cannot use a server (php etc).
Thanks
Steve
<script>
var i = 0;
var itemKey = localStorage.key(i);
var values = localStorage.getItem(itemKey);
values = values.split(";");
var name = values[0];
var company = values[1];
var contactnumber = values[2];
var email = values[3];
var address1 = values[4];
var address2 = values[5];
var suburb = values[6]
var postcode = values[7];
var comments = values[8];
var bags = values[9];
var distance = values[10];
var hdelivery_fee = values[11];
var hprice = values[12];
var htotal_notax = values[13];
var hgst = values[14];
var htotal_tax = values[15];
var hordernumber = values[16];
document.write('Name: ' + name + '<br />');
document.write('Company: ' + company + '<br />');
document.write('Contact: ' + contactnumber + '<br />');
document.write('Email; ' + email + '<br />');
document.write('Address; ' + address1 + '<br />');
document.write('Address; ' + address2 + '<br />');
document.write('Suburb; ' + suburb + '<br />');
document.write('Postcode; ' + postcode + '<br />');
document.write('Comments; ' + comments + '<br />');
document.write('Number of Bags; ' + bags + '<br />');
document.write('Distance; ' + distance + '<br />');
document.write('Delivery Fee; $' + hdelivery_fee + '<br />');
document.write('Price of Bags; $' + hprice + '<br />');
document.write('Total Ex-GST; $' + htotal_notax + '<br />');
document.write('GST; $' + hgst + '<br />');
document.write('Total Inc GST; $' + htotal_tax + '<br />');
document.write('hordernumber; ' + hordernumber + '<br />');
</script>

To display the last value of an array you should use values[values.length-1].
This will guarantee you get the absolute last one.

simple put
var itemKey = localStorage.key(i);
var values = localStorage.getItem(itemKey); in a loop and increement i each time.

You can try something like this
var localStorageKeys = Object.keys(localStorage);
getOrder(localStoragesKeys[localStoragesKeys.length-1]);
function getOrder(itemKey) {
var values = localStorage.getItem(itemKey);
values = values.split(";");
var name = values[0];
var company = values[1];
var contactnumber = values[2];
var email = values[3];
var address1 = values[4];
var address2 = values[5];
var suburb = values[6]
var postcode = values[7];
var comments = values[8];
var bags = values[9];
var distance = values[10];
var hdelivery_fee = values[11];
var hprice = values[12];
var htotal_notax = values[13];
var hgst = values[14];
var htotal_tax = values[15];
var hordernumber = values[16];
document.write('Name: ' + name + '<br />');
document.write('Company: ' + company + '<br />');
document.write('Contact: ' + contactnumber + '<br />');
document.write('Email; ' + email + '<br />');
document.write('Address; ' + address1 + '<br />');
document.write('Address; ' + address2 + '<br />');
document.write('Suburb; ' + suburb + '<br />');
document.write('Postcode; ' + postcode + '<br />');
document.write('Comments; ' + comments + '<br />');
document.write('Number of Bags; ' + bags + '<br />');
document.write('Distance; ' + distance + '<br />');
document.write('Delivery Fee; $' + hdelivery_fee + '<br />');
document.write('Price of Bags; $' + hprice + '<br />');
document.write('Total Ex-GST; $' + htotal_notax + '<br />');
document.write('GST; $' + hgst + '<br />');
document.write('Total Inc GST; $' + htotal_tax + '<br />');
document.write('hordernumber; ' + hordernumber + '<br />');
}

If you must use localStorage and cannot use any client side database then I would save each entry with a key like new Date().getTime() with a known string in front of it, so that you have key-1368910344400.
When you need to retrieve the last entry then you could do:
var keys = Object.keys(localStorage);
keys = keys.map(function(key) {
// check if the current key matches match "key-"
// if that's the case create a new Date object with the ms obtained by a split
// return the Date
});
// sort keys and take the most recent
This is usually a bad choice but as I understand it you're limited with choices, so you have to stretch things a bit.
If you could use a browser that supports html5 and webdb then just throw localStorage away and go for that :D, here is an example: http://www.html5rocks.com/en/tutorials/webdatabase/todo/