Search Box for Twitch API project

Search Box for Twitch API project
0

#1

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/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!!!


#2

Could you give me a link to your codepen? It’s hard to help you without all your code.