FreeCodeCamp Twitchtv JSON API Zipline Project: Who’s On Twitchtv?

Posted by

screenshot-localhost_8080_2016-06-07_16-57-08_zeygjg

FreeCodeCamp’s Twitchtv JSON API challenge is the 4th challenge in the intermediate front end development projects. The objectives of this project were to reverse engineer this example: Twitch JSON API ; however put your own spin on it, see whether Free Code Camp is currently streaming, provide a link to the user’s status output to be sent to their channel, and if a user is streaming provide details of the stream. Lastly, if the user has closed their account  or the account never existed, provide a placeholder notification.  For this challenge, I wanted to design a televison to display the users and their information. I made  an outer div called outerbox and then I added other div called innerbox. I made the border solid  black and the background color black as well.  For this project, I stepped and the box some and used some javascript  methods that I’ve never used before. One being the document.createElement method to create div’s, classes, and other elements to display the user’s data sent back from the two API calls that were made. As shown below:

var createUserDivs = function() {
	for (var i = 0; i < users.length; i++) {
		// create the parent div
		var div = document.createElement("DIV");
		div.id = users[i];
		div.className = "twitchUser text-center col-md-2";
		// create image child
		var image = document.createElement("IMG");
		image.className = "channelImage";
		div.appendChild(image);
		// create h3 for userName
		var userName = document.createElement("DIV");
		userName.className = "userName";
		div.appendChild(userName);
		// create p for userStreamInfo
		var userStreamInfo = document.createElement("DIV");
		userStreamInfo.className = "userStreamInfo";
		div.appendChild(userStreamInfo);
		//create a link for userStatus
		var userStatus = document.createElement("A");
		userStatus.className = "userStatus ";
		div.appendChild(userStatus);
		//create a p for user game status
		var game = document.createElement("P");
		game.className = "game";
		div.appendChild(game);
		document.getElementById("twitchUsersContainer").appendChild(div);

	}
}

Speaking of the two API calls, one call was made to get the user’s stream status.  Basically, this let you know if the users was online or offline. To go through each user, a for loop was used to iterate through the array of users were given. As shown here:


function retrieveStreamInfo() {
	var streamApiUrl = "https://api.twitch.tv/kraken/streams/";
	for (var i = 0; i < users.length; i++) {
		$.ajax({
			type: 'GET',
			url: streamApiUrl + users[i],
			userId: users[i],
			dataType: "jsonp",
			success: function(data) {
				console.log(this.userId);
				console.log(data);
				var streamInfo = {
					userStreamInfo: data.stream,
					userStatus: data.status
				};

				displayStreamData(streamInfo, this.userId);
			},

			error: function(errorDisplay) {
				var streamInfo = {
					userStatus: '400'
				};
				displayStreamData(streamInfo, this.userId);
			}
		});
	}

}

The second API call had to be made because the call to https://api.twitch.tv/kraken/streams/ didn’t provide information about the user’s channel. The data sent back from this call provided the logo, url, account information, and what they were streaming.  Here’s the code for the API call to receive the channel data:

function retrieveChannelInfo() {
	var channelApiUrl = "https://api.twitch.tv/kraken/channels/";
	for (var i = 0; i < users.length; i++) {
		$.ajax({
			type: 'GET',
			url: channelApiUrl + users[i],
			userId: users[i],
			dataType: "jsonp",
			success: function(data) {
				console.log(this.userId);
				//console.log(data);

				var channelInfo = {
					userStatus: data.status,
					userName: data.display_name,
					userLogo: data.logo,
					message: data.message,
					userUrl: data.url,
					game: data.game
				};
				//console.log(users[i]);
				//console.log(channelInfo);
				displayChannelData(channelInfo, this.userId);
			},

			error: function(errorDisplay) {
				alert("Error! Could not retrieve information");
			}
		});
	}

}

After getting all the data back from both API calls, it was time to display the data.  I wrote 2 functions for this.  One function addressed the data returned from the https://api.twitch.tv/kraken/channels call and the other the https://api.twitch.tv/kraken/streams/ call. As you can see below, I incorporated an if statement based on their status and streaming information.

function displayChannelData(channelInfo, userId) {
	// gets the image element by the document.get method to retrieve info in said element id.
	var logoElementArray = document.getElementById(userId).getElementsByClassName("channelImage");
	var userStatusInfo = document.getElementById(userId).getElementsByClassName("userStatus");
	var att = document.createAttribute("href");
	att.value = channelInfo.userUrl;
	userStatusInfo[0].setAttributeNode(att);

	//display the username into the assigned div and class
	$('#' + userId + " .userName").text(userId);

	if (channelInfo.userStatus === null) {
		$('#' + userId + " .userStatus").text();
		$('#' + userId + " .game").text();
		logoElementArray[0].src = channelInfo.userLogo;
	} else if (channelInfo.userStatus === 422 || channelInfo.userStatus === 404) {
		logoElementArray[0].src = "https://res.cloudinary.com/angiemjohnson/image/upload/v1465090995/delete_x_red_globe_89_u0brnq.jpg";
	} else {
		$('#' + userId + " .userStatus").text(channelInfo.userStatus);
		$('#' + userId + " .game").text("stream:" + channelInfo.game);
		logoElementArray[0].src = channelInfo.userLogo;
	}

	if (channelInfo.game === null) {
		$("#" + userId + " .game").hide();
	}

}

/********************************************************************************************
 * Displays whether the user is streaming or not
 **********************************************************************************************/
function displayStreamData(streamInfo, userId) {
	if (streamInfo.userStreamInfo === null) {
		$('#' + userId + " .userStreamInfo").text("Offline");
	} else if (streamInfo.userStatus === 422 ||
		streamInfo.userStatus === 404 ||
		streamInfo.userStatus === '400') {
		$('#' + userId + " .userStreamInfo").text("Account doesn't exist");
	} else {
		$('#' + userId + " .userStreamInfo").text("Online");
	}
}

In closing, I’m pretty satisfied with the finished project.  I expanded my coding by using some new javascript methods I’ve never used before.  I can now say that I’m now very familiar with API calls, how to interpret the JSON data that is returned, get the data I need and also display it using the objects that are returned. You can see the entire code here: Codepen site   Now on to learning Intermediate Algorithm Scripting.  Another step closer to earning my  Front End Development Certification.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s