Hey guys,
I am nearly done with my Twitch.tv API project, I guess I could submit it like that but I want the search bar to run as well. Have a look at my code:
$(document).ready(function() {
var following = [];
var followerURL = "https://wind-bow.glitch.me/twitch-api/users/freecodecamp/follows/channels";
$.getJSON(followerURL, function(data1) {
//find the accounts that follow FREECODECAMP and put them in the FOLLOWING arr
for (var i = 0; i < data1.follows.length; i++) {
var displayName = data1.follows[i].channel.display_name;
following.push(displayName);
}
following.push("comster404", "brunofin", "ESL_SC2", "freecodecamp");
//loop through the arr to check if the ...
for (var j = 0; j < following.length; j++) {
var userURL = "https://wind-bow.glitch.me/twitch-api/channels/" + following[j] + "/?callback=?";
$.getJSON(userURL).done(function(data2) {
var name;
var logo;
var status;
var info;
//.../users/... url if the don't exist
//if (data2.error) {
//logo = "https://workinfo.info/images/modules/directory/listings/thumbs/no_logo.jpg";
//name = data2.message.slice(34, -1);
//status = "https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=50711229";
//$(".result").append("<div class='row'>" + "<div class='online'>" + "<div class='logo col-md-3'>" +
//"<img src='" + logo + "'>" +
//"</div>" + "<div class='nON col-md-7'><br>" + name + "</div>" + "<div class='col-md-2'>" + "<img class='ON' src='" + status + "'>" + "</div></div></div>");
//}
//.../users/... url if they are OFFLINE
if(data2.partner == false) {
logo = data2.logo;
if(logo === null) {
logo = "https://workinfo.info/images/modules/directory/listings/thumbs/no_logo.jpg";
}
name = data2.display_name;
status = "http://tecfa.unige.ch/guides/svg/ex/html5/svg-import/huge-red-circle.svg";
$(".result").append("<div class='row' data-filter data-filter-name='" + name + "'>" + "<div class='online'>" + "<div class='logo col-md-3'>" +
"<a href='https://www.twitch.tv/" + data2.name + "' target='_blank'><img src='" + logo + "'></a>" +
"</div>" + "<div class='nON col-md-7'>" + "<a href='https://www.twitch.tv/" + data2.name + "' target='_blank'>" + name + "</a><br>" + info + "</div>" + "<div class='col-md-2'>" + "<img class='ON' src='" + status + "'>" + "</div></div></div>");
}
//.../users/... url if they are ONLINE
if(data2.partner) {
logo = data2.logo;
if(logo === null) {
logo = "https://workinfo.info/images/modules/directory/listings/thumbs/no_logo.jpg";
}
name = data2.display_name;
status = "http://www.pros.com/wp-content/forum/uploads/2015/10/img-checkmark.svg";
info = data2.status;
$(".result").append("<div class='row' data-filter data-filter-name='" + name + "'>" + "<div class='online'>" + "<div class='logo col-md-3'>" +
"<a href='https://www.twitch.tv/" + data2.name + "' target='_blank'><img src='" + logo + "'></a>" +
"</div>" + "<div class='nON col-md-7'>" + "<a href='https://www.twitch.tv/" + data2.name + "' target='_blank'>" + name + "</a><br>" + info + "</div>" + "<div class='col-md-2'>" + "<img class='ON' src='" + status + "'>" + "</div></div></div>");
}
});
//Defining the search bar
$("#search").keyup(function() {
var username = $("#search").val().toLowerCase();
var filterItems = $("[data-filter]");
if (username != "") {
filterItems.addClass("hidden");
$("[data-filter][data-filter-name='" + name + "']").removeClass("hidden");
}
});
}
});
});
Everything works well except the search bar. I tried multiple approaches … defining the addClass before the if statement etc. but it seems that my program does open the kepup function but not the if-else-condition.
Can anybody give me a hint or help with the solution of that? Thanks a lot!!!