Twitch.tv API Project Issue

Code Feedback
1

Hi, I’ve been having an issue with my project: https://codepen.io/Wheresmylawyer/pen/oGBKjw?editors=0010. I can see in the console that the $.getJSON request goes through, and is giving me the data as expected. I can switch between active,online,offline streams with the buttons and it will show the offline streams. However, it doesn’t show the online streams. I think it has something to do with the way the if/else statement is setup in the JS file? Any help would be greatly appreciated.

Thanks

2

Afternoon,

Have you gone through the errors in the dev console for this codePen? Looks like you’ve got a few in there

image

You’re not accessing the logo property of the data object coming back for each online user. I can see where you’re off. Check the console’s errors specific to the line where your code fails, and I’m sure you’ll see what needs to be changed

3

Thanks. I didn’t know you could use your browser to check for errors in Codepen. I think I relying on old documents for the API, I thought there was a logo component to the data for active streams, but now that I look again it’s not coming up in the console. Changing the src attribute for the image fixed it completely: https://codepen.io/Wheresmylawyer/pen/oGBKjw

4

Yup, I totally just stumbled onto it once.

Just so you know, you could have used data.stream.logo to get the source too. I think you were just missing the .stream. portion

If you’re interested I took a different approach. I check the users object, and then run a separate ajax call to see if they’re online. I just started working on this yesterday so I’m far from done

const $main = $('#main'),
			$title = $('#title'),
			$fcStatus = $('#FC-status'),
			$status = $('#status'),
			$streamers = $('#streamers');

const streamersArr = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

$(function(){
	isCodeCampOnline();

	streamersArr.forEach(function(e,i){
		getTwitchUserInfo(e);
	});

		//Make call to api
	function isCodeCampOnline() {
		$.ajax({
			url: 'https://wind-bow.gomix.me/twitch-api/streams/freecodecamp',
			type: 'GET',
			dataType: 'jsonp',
			success: function(data){
				console.log(data.stream);
				if(data.stream == null) {
					$fcStatus.append('<h3>FC is OFFLINE<h3>');
				} else {
					$fcStatus.append('<h3>FC is ONLINE! <a href="https://api.twitch.tv/kraken/channels/freecodecamp">View Channel</a></h3>')
				}
			}
		});
	}//End isCodeCampOnline()

	function getTwitchUserInfo(user) {
		$.ajax({
			url: 'https://wind-bow.gomix.me/twitch-api/users/' +user,
			type: 'GET',
			dataType: 'jsonp',
			async: false,
			success: function(data){
				let logo = data.logo,
						name = data.display_name,
						bio = data.bio;

				isUserOnline(user, data.logo, data.display_name, data.bio);
			}
		})
	}//End getTwichUserInfo()

	function isUserOnline(user, logo, name, bio) {
		$.ajax({
			url: 'https://wind-bow.gomix.me/twitch-api/streams/' +user,
			type: 'GET',
			dataType: 'jsonp',
			success: function(statusData){

				//In case no BIO info given
				if(bio == null) {
					bio = '<p>No BIO given, this guy must be a ninja</p>';
				}

				let status;

				if(statusData.stream == null) {
					status = '<p> is OFFLINE<p>';
				} else {
					status =  '<p> is ONLINE! <a target="_blank" href="https://www.twitch.tv/'+user+'">View Channel</a><p>';
				}

				var html = 	'<div class="user-div">'+
						        '<div class="logo"><img src="' +logo+ '"</div>'+
							'<div class="name">' +name+ '</div>'+
							'<div class="user-status">' +status+ '</div>'+
							'<div class="info"><h3 class="user-bio">' +bio+ '</h3></div>'+
							'</div>';
				
				console.log(status);
				$status.append(html);
			}
		})
	}//End isUserOnline()
})//End jQuery